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PACKED WITH 
TUTORIALS AND 
TECHNIQUES, THIS 
IS THE ULTIMATE 
GATEWAY 

TO CREATIVITY 


elcome to the Creative 
Collection from Computer 
Arts, the world's 
best-selling creative 
magazine. Packed with in-depth tutorials, 
helpful tips and stunning imagery, it's the 
ultimate gateway to creativity. Whether 
you're developing skills to progress your 
career or simply an enthusiast with a 
passion for digital art and design, this 
colection contains the information you 
need to improve your understanding of 
leading graphics packages and important 
creative disciplines, including colour 
management, typography, logo design, 
3D modelling and desktop film editing. 
The tutorials and articles featured here 
are considered to be the best from a full 
year of Computer Arts and Computer Arts 
Projects magazines. These sister titles 
provide a wealth of information every 
month, with Computer Arts providing 
industry news, in-depth reviews and great 
tutorials while Projects goes into depth on 
a range of topics from Photoshop 
illustration to 3D and Web design. 


The Creative Collection is a perfect 
introduction to not only a vibrant creative 
world but to the technical help and 
industry knowledge explored every 
month in these magazines. 

This Collection is divided into five 
chapters — Illustration, Graphic design and 
typography, Web design, 3D and digital 
video. Whatever your preference, there's 
something for you here. So read on and 
soak up our contributors’ expertise in 
Photoshop, Painter, InDesign, Flash, 
Dreamweaver, 3ds max and much more. 
And, just to make it even better, it’s all 
supported by a DVD of tutorial files, 
demos and royalty-free creative 
resources from Digital Vision. 

Don't forget to look out for Computer 
Arts next time you're in a newsagent or 
book store and, if you love us, you can 
even subscribe via the form on page 78. 
Let us know what you think on 
ca.mail@futurenet.co.uk. 
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first partof our layout and design tutorial 


: a4 INDESIGN 2: PART TWO 87 
J Soper ££ - 0 
our ; ee _ “BETTERIM 34 noting thas creative techniques before 


3: 7 - Ocument ready for output 
allowing Sufapert i ‘tial “_. Five leading artists shafe their ideas and, "6 Sy 
Pt) 5. techniques for in proving your digital images. . AUIAR 2K XPRESS 6 92 
‘ . \ a 
=i P FACE/OFI F 22 Bs, a Bes: as a long time coming but.XPress 6is better 
Sy ele nieers alarore . 3 th an ever. Check out its new, improved features” => 
g portrait 2) ae ie Ps 
ANGA $7 a "Read jour theory and SIGNINGALOGO 98. | 
We Ne howté < ee a de) pest mage OuNny undamentals of brand and logo design 
“ Using Photoshop, Mil 1 : : Fee mI ained in this detailed tutorial “ 


Sf 3° : ] 
MX ‘CITY LIMITS ° Piper ho | 
ah Use the toolset in FreeHand Ta MEN : eee PEFACE . } \ 1 12 Hi 

4. wis to construct your i ae ctor world i ie TC i % 5 now the vee desi n ace if 
18) eS. ae ’ ab—the fi f teation an a ailze 

PAINTER 8: : 3 et 
Ma ‘ tel 
a. Ff 

ASTING 106 


it designers share their enthusiasm for 
pefaces and reveal their inspirations 
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One-page tutorials to refresh your skills 


Use Photos hopto cra “9 
that won't break your budget » °/ INDESIGN 105 


Working with the eyedropper tool 


CHAPTER 3 


THE SECRETS 
OF SUCCESSFUL 
WEB DESIGN 


TUTORIALS 


VECTOR DRAWING IN 
FLASH MX 126 


Create a zoomable map for your site 
with the vector drawing and Trace tools 


FLASH MX 
NAVIGATION 132 


Get to grips with timeline and navigation 
tools as we create an interactive comic 


FLASH MX 
ANIMATION 138 


Animate a credit sequence for a Web 
cartoon using the animation tools in Flash MX 


CREATING THE PAGES 148 


Convert your Website's designs in Photoshop to 
new HTML pages in Dreamweaver 


FLASH MX FOR 
ARTISTS 154 


Follow this great guide to using the 
illustration tools in Flash MX 


FEATURES 
ULTIMATE WEB DESIGN 120 


40 hot tips from the world’s top Web designers on 
how to make your Websites rock 


ONLINE PORTFOLIOS 144 


Websites can make or break you — how to 
perfect your online presence 


SHORTCUTS 


One-page tutorials to refresh your skills 


DREAMWEAVER 

Whytables are better than layers 131 
Let Your user choose your site’s design 137 
Designing effective layout tables 143 
Keep control of your pop-up windows 159 


FLASH 147 


Using bitmap images in Flash 


CHAPTER 4 


LEARN NEW 
3D, FECHNIQUES 


TUTORIALS 
3DS MAX 5 164 


Use 3ds max 5to model, texture and render 
an army of 3D robots 


CINEMA 4D R8& 
XPRESSO 172 


Familiarise yourself with this new addition to the 
C4Dtoolset - a novel way of linking objects 


REALSOFT 3D 180 


Model our cool dune buggy using this 
special edition of Realsoft 3D 


LANDSCAPES IN 
3DS MAX 5 


Create your own spectacular grand ggnyon in 3ds 
max with the help of this great tutogga 


CEL-SHADY 
INDIVIDUAL 


CHAPTER 5 


12 + DIGITAL VIDEO 
MASTERCLASS | 
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TUTORIALS. | 
AFTEREFFECTS6- ° 204 


Test drive the text tools, MotionTracker, 
Liquify Tool and video painting in AE6 


Get to grips with new shading techniques 
that combine 3D and 2D elements 


PREMIERE PRO 208 °.. 
Create the titles for a fashion program 
using Adobe's leading video editor 
' i © 
COMBUSTION 2.1 212 “ 
Combine video footage with animation 
SHORTCUTS and graphics in combustion before mastering 
One-page tutorials to refresh your skills your project using cleaner XL/6 
3DS MAX 
Create realistic light effects 171 FE ATU sq ES 
Simulate the end of the world... 197 THE DESKTOP oak 
CINEMA 4D A generation has grown up with DV camcorders 
The science of HyperNURBS 178 and is now using them to make feature films. 


Why not join them? 
Using instances to improve workflow 179 


ON THE DVD 


A COMPLETE GUIDE TO WHAT’S ON YOUR DVD-ROM -« PC & MAC 


FULL PRODUCT 


REALSOFT 3D 4.5 SE 


Realsoft 3D is a powerful program for 3D 
modelling and animation. We first gave RealSoft 
3D 4.5 Special Edition away on Computer Arts 
issue 86, and the product-tutorial combo proved 
so popular, we've brought it back. Turn to page 
180 to get to grips with this superb 3D product. 


MANUFACTURER Realsoft 
CONTACT www.realsoft.com 
SYSTEM REQUIREMENTS 

PC: Windows 98/2000/NT/ME/XP, 
128MB RAM, 100MB HD space 


CREATIVE RESOURCES 


DIGITAL VISION 
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On the disc, you'll also find 
over £2000-worth of images, 
fonts.and movie clips from 
stock company, Digital Vision 


One of the creative world’s most prestigious stock 
companies has provided six high-res images, 

two QuickTime movie clips and a typeface for the 
Creative Collection 2003. The images and movies 
include roads, buildings, animals, fires and more, 
and can be used in illustrations, graphic designs and 
Websites for both personal and commercial.use. 

Digital Vision hosts a massive catalogue of 
photography, illustration, motion graphics and 
fonts. Readers will recognise them from their 
two /nfinity illustration series and theirtifestyle 
photography catalogues, Vieand verve. Its vast 
Site is fully searchable, and images are available 
to buyon-CD or as an instant download. 

On your disc you'll find the images in JPEG 
format, a Kennedy book font for Mac and PC, and 
two short clips in QuickTime format. The files can 
be located in the Digital Vision folder on the root 
Of your disc. Please read the licence agreement 
before.you use them. 


INFO. www.digitalvisiononline.co.uk, www.digitalvision.com 


3DS MAX 5 


This industry stalwart continues to wow 3D 
designers, animators, games designers and 
visualisers each time it gets upgraded. From page 
164 you'll find in-depth tutorials on all its features. 


MANUFACTURER Discreet 

CONTACT www.discreet.com 

PRICE £2814 : 
SYSTEM REQUIREMENTS PC: 2000, XP Pro, 300MHz+, 
256MB RAM, 1024x768, 300MB HD space. 


AFTER EFFECTS6 


Adobe’s leading compositor now comes in both 
Standard and Pro versions, depending on your 
demands. Take version 6’s new features for a test 
drive with this demo and tutorial starting page 204. 


MANUFACTURER Adobe 

CONTACT www.adobe.co.uk 

PRICE £650 

SYSTEM REQUIREMENTS Mac: G4, Mac OS X 10.2.5, 
128MB RAM, 150MB HD space. PC: Pentium Ill or 4, 
Win 2000/ XP, 128MB RAM, 150MB HD space 


AUDITION 


This brand new application is perfect for creating 
the sounds and effects to accompany video, 
Websites and animations. We've included the demo 
for you to'try for yourself. 


MANUFACTURER Adobe 

‘CONTACT www.adobe.co.uk 

PRICE £233 

SYSTEM REQUIREMENTS PC: 400MHz processor, Win 
98/ ME/ 2000/ XP, 64IMB RAM, 55MB HD space, stereo 
sound card 


CINEMA 4D R8 


Cinema 4D R8 is Maxon’s core 3D program, a 
powerful app for animation and 3D artwork that 
can be boosted by a range of add-ons. You'll find 
in-depth tutorials on the app starting page 172. 


MANUFACTURER Maxon 

CONTACT www.maxon.net 

PRICE £499 

SYSTEM REQUIREMENTS Mac: OS 9, PowerPC,128MB 
RAM. PC: 98/ME, 128MB RAM, 400MHz PowerPC, 
Intel, or AMD 


CLEANER 6/XL 


cleaner XL supports many input and output formats 
for you to expand your encoding capabilities and 
produce quality audio and video on the desktop. 
Use cleanerto finish off our video project which 
starts on page 212. 


MANUFACTURER Discreet 

CONTACT www.discreet.com 

PRICE £511 

SYSTEM REQUIREMENTS Mac: OS 9.1, OS X 10.1, 
128MB RAM, 20MB HD space. PC: Pentium III 800MHz, 
2000, 256MB RAM, 200MB HD space 


USE THESE DEMOS TO FOLLOW OUR TUTORIALS 


TRIAL SOFTWARE 


COMBUSTION 2.1 


After its recent price drop, combustion is a 
fast-growing contender in the compositing 
editing and animation arena. Turn to page 212 

for guidance from the programming team itself. 


MANUFACTURER Discreet 

CONTACT www.discreet.com 

PRICE £877 

SYSTEM REQUIREMENTS Mac: OS X 10.1+, Mac OS 
9.x, 266MHz G3/G4, graphics card with 4MB of VRAM, 
256MB RAM minimum, 70MB HD space. PC: XP, 2000, 
Pill AMD Athlon XP, 850MHz+ 2GB HD, 256MB RAM, 
Video card with 4MB of VRAM 


DREAMWEAVER MX 


Dreamweaver allows designers to code or visually 
build their Websites, and it works with Flash, 

Fireworks and Photoshop. Our coverage of this 
superb app starts on page 131. 


MANUFACTURER Macromedia 
CONTACT www.macromedia.com/uk 
PRICE £398 (Studio MX 2004 from £821) 
SYSTEM REQUIREMENTS Mac: OS 10.2, 128, 
275MB HD space. PC: Win 98-XP, 128MB R, 
275MB HD space 


ENCORE 


Filling a void in multimedia creati 
Encore DVDis fully compatible 
Video Collection and can be ug@#i to produce 
DVD interfaces. See page 211@r a brief guide. 


MANUFACTURER Adobe 

CONTACT www.adobe.co.uk 

PRICE £448 

SYSTEM REQUIREMENTS PC: Intel Pentium Ill, Win XP, 
256MB RAM, 500MB HD space, DVD drive and burner 


FLASH MX 


Flashis the Web's most versatile and popular tool, 
capable of both simple animations and fully blown 
database-driven sites. Turn to page 126. 


MANUFACTURER Macromedia 

CONTACT www.macromedia.com/uk 

PRICE £492 (Studio MX 2004 from £821) 

SYSTEM REQUIREMENTS Mac: OS 10.2, G3, 128MB 
RAM, 215MB HD space. PC: Win 98 SE, 2000, XP, 
128MB RAM, 215MB HD space 


FREEHAND MX 


The all-round illustration, DTP and Web graphics 

package was upgraded earlier this year with new 
features for enhancing your vector images. Use it 
to create our stunning cityscape on page 42. 


MANUFACTURER Macromedia 

CONTACT www.macromedia.com/uk 

PRICE £351 (Studio MX 2004 from £821) 
SYSTEM REQUIREMENTS Mac: OS 9.1+,64MB 
RAM, 70MB HD space. PC: 98-XP, 64IMB RAM, 
70MB HD space. 


Photoshop, Flash, Dreamweaver, Mlustrator, FreeHand, 


DESIGN 2.0 


InDesign 2.0 has something for everyone, and with 
InDesign CS on the way, we can expect to see more. 
Get to grips with the app on page 82. 


MANUFACTURER Adobe 

CONTACT www.adobe.co.uk 

PRICE £714 

SYSTEM REQUIREMENTS Mac: G3/G4/G5, OS X 10.2, 
128MB RAM, 50MB HD space PC: Intel Pentium I, Ill, 
or 4, Win 2000/ XP, 128MB RAM, 185MB HD space 


ILLUSTRATOR 10 


This is far more than a vector package; with features 
tailored for Web and 3D as well as print, ///ustrator is 
a flexible and powerful tool. Use it with Photoshop 
on page 28 and /nDesign on page 82. 


MANUFACTURER Adobe 

CONTACT www.adobe.co.uk 

PRICE £507 

SYSTEM REQUIREMENTS Mac: G3/G4/G5, OS X 10.2, 
192MB RAM, 470MB HD space. PC: Intel Pentium Ill or 
4, Win 2000/ XP, 192MB RAM, 470MB HD space 


PHOTOSHOP.7 


This undisputed king of image-editing and 
illustration has penetrated the industry. We've 
got over 35 pages of expert advice for Photoshop 
starting with our cover tutorial on page 16. 


MANUFACTURER Adobe 

CONTACT www.adobe.co.uk 

PRICE £598 

SYSTEM REQUIREMENTS Mac: G3/G4/G5, 192MB RAM, 
OS 9.1, OS X 10.1, 320MB HD space. PC: Pentium Ill+, 
Win 2000/ XP, 192MB RAM, 280MB HD space 


PREMIERE 6.5 


This desktop video tool is making waves through 
the professional industry. Try it out using this demo, 
and if you want more, turn to page 208 for an 
in-depth preview of its bigger, better and PC-only 
brother, Premiere Pro. 


MANUFACTURER Adobe 

CONTACT www.adobe.co.uk 

PRICE £617 

SYSTEM REQUIREMENTS Mac: G4/G5, 32MB RAM, 
OS 9.1, 50MB HD space. PC: Intel Pentium II or Ill, 
Win 98/2000/ME/NT, 64MB RAM, 85MB HD space 
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It's more than creative software. 

It's a creative support group. 

Introducing the Adobe® Creative Suite. 

It combines full, new CS versions of 
Photoshop; Illustrator, InDesign? and GoLive’ 
with Version Cue” an innovative tool to:help 
you manage and keep track of your files. 
Plus, it’s got Acrobat® Professional. So now 


you can think, play and tinker around all 


Adobe Creative Suite 


Tools for the New Work 


you want, without holding yourself back. 


www.adobe.co.uk/therapy 
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STRAT: 


ee 


COVER TUTORIAL 1 


Recreate our amazing cover illustration by 
following our expert Photoshop 7 tutoria' 


as we Create a stunning portrait 


MANGA STYLE 28 
We show you how to draw ga-style 
using Photoshop, I/lustratorgnd a pencil 
MX CITY LIM 42 


to construct your very own vector world 


-S PAINTER 8 50 
Take advantage of Corel’s leading natural 
media-too! to create traditional styles 


MARS MISSION 
- PIXEL ART 56 


Use the compact but vibrant nature of 
pixels to createa complex space station 


T-SHIRT DESIGN 72 


Use,.Photoshopto craft successful T-shirt 
‘designs that won't break your budget 


FEATURES 


51 TIPS FOR 
BETTER IMAGES 34 


Five leading artists share their ideas and 
techniques for improving your digital images 


COLOUR THEORY 66 


Read our overview of colour theory and 
management to ensure great image output 


SHORTCUTS 


One-page tutorials to refresh your skills 


PHOTOSHOP 


Expert retouching techniques 27 
Get to grips with sharpening 33 
Layer Effects and Styles in action 65 
ves 334 a 
FREEHAND ‘43 
Create scratchy vector images “"y 
“e 
ILLUSTRATOR 49 
Adding masks to layers %, ff 
PAINTER 55 


Discover paper grain effects 


ILLUSTRATION BY RICHARD MAY 


www.richard-may.com 


Cover tutorial (a & 


PHOTOSHOP 


STRIKINGLY 
SIMPLE 


Forget fancy plug-ins and 
eye-popping effects. We show 
you how to produce the most 
striking of digital illustrations 
using just the simplest of 
Photoshop techniques. All you 
need is a headful of ideas 


Recent incarnations of Adobe's flagship image-editing app 
features a plethora of useful bells and helpful whistles to 
get that workflow flowing. All good stuff, for sure, but 
there's still no Talent menu or Instant Concept filter to fall 
back on, so don’t worry if you can’t afford to upgrade yet. 
Remember, your greatest designs will always come from 
inside you — not the latest feature-packed design app. 

For the purposes of this tutorial, then, we're keeping 
everything (deceptively) simple to ensure that everyone 
can get in on the act. It’s all about form, tone, composition, 
and — dare we say it? —style. If you're looking for smoothly 
rendered NURBs and polygons, check out the 3D design 
chapter, starting on page 162, because here we’re 
concentrating on natural textures, clearly defined, bold 
colours — and lots of ‘negative space’. 

And don't feel you have to follow this tutorial to the 
letter. That would be missing the point. We want to guide 
you, not mother you, hence the lack of related files on the 
cover DVD. So are you ready to dust off those real-life 
brushes and create — and scan — your own textures? 

You'll be thanking us later, we promise. 


INFO Words and artwork by illustrator Richard May 
(www.richard-may.com), co-founder of 
Pixelsurgeon.com (www.pixelsurgeon.com) 


ON THE DVD 


You'll find a 

fully-working demo 
of Photoshop 7 on 
the cover DVD. 
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@- me Illustration 


PART 1 BRAVE THE 
ELEMENTS 


Don't hold back — get your ideas down 
on paper ! 


First of all, draw. On paper. Use a real pencil and 

scribble for a while. Think. Consider composition 
and image balance. What is and isn’t likely to work. 
How's the composition? If, by some weird twist of 
fate, you decide to create an image of awoman ina 
white skirt with lots of leaves blowing around, then 
you're on the right track. We used a mouse for the 
above diagram. 


Name: 
-~ Image Size: 51.54 ———_______—__, 
Width: 
Welamt: [zag —](em 13) 
Resolution: 
Mode:(RGBColor 


;— Contents 


@ White 

© Backaround Color 
Start by creating a new canvas in Photoshop 
measuring 460mm wide by 280mm high. If you 
want to move fast — purely for practice purposes — 
work at 72dpi. If you want something you can print 
and show to your gran, go for the standard 300dpi. 


Go with a suitably autumnal horizon block fill. 

Ideally, you're looking for colours that won't pop 
up and complain about red and green never being 
seen as you progress. Of course, you may find 
yourself subtly tweaking the tone as you add more 
elements to the image. More on that later. 
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-— Image Size: ba Ee eal 

| wie: [260] (G13) 

| eign: [269] (em 1) 

Resolution:[300  |{pixels/inch | +) 
Mode: (Reb Goior 3) 


Contents Set 


@ White 

Q Backaround Color 
Now search for a suitable photograph to use as 
the basis of your illustration. If you want to draw 
your figure, that’s fine. We're looking for smooth, 
clean, natural curves so cutting around a figure from 
a photograph can be advantageous. Your own 
photography, or — at a push — a Google Image search, 
is the way to go. Just be super-careful when using 
other people's photographs; if your illustration looks 
anything like the original image, then you could get 
into trouble. 
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Q 
| 
f 


Carefully cut around your drawing or photograph 

using the Path tool. If you're not familiar with 
Paths and find them a little counter-intuitive, don’t 
worry. They take a little practice to master. Ideally, you 
need to divide your figure into five or six basic 
shapes. We don’t have a head to deal with here so 
we're looking at five: arms, legs, and body. This is 
because, later on, you'll be selecting and filling each 
body shape with separate textures and fills. 


Edge smoothing: 
(] Generate custom color fist 
Bitmap Conversion Methods 
@ Threshold ———a———_ 
Qcontrast ~% 
(Cl Boost 


M] Convert Selection Fdae 


It’s not essential but if you want to make things 

super-smooth, save each body shape as a 
separate greyscale flat PSD and open in Adobe 
Streamline (if you have it). Convert each shape to 
paths and save, then open back up in Photoshop. A 
good tip: always render the EPS file at twice the size 
you think you'll need it to be. This gives you lots of 
room to scale and manoeuvre without encountering 
‘jaggys’ or ‘dithering’. 


Apple-click (or Ctrl-click) on each Work Path, 

invert the selection, hit Delete to remove the 
background, invert again, then fill with black (for 
now). Now drag each body part onto your main 
canvas. If you want, save a full body version to use 
as a guide. Start to select (by Apple-clicking or 
Ctrl-clicking on each layer) each shape and fill 
with different shades of grey, in order to see 
what's going off when assembling the figure. 


i 


Start to bring the body back together. Zoom in 

on various areas that join together and trim 
overlapping pixels if required. Don’t worry too much 
about making it perfect, because you can always 
trim again at a later point. Just make sure the 
proportions are correct. 


At this point, you may wish to bring in some 

texture to fill the body area. Paint textures provide 
a nice, tactile contrast to your block-colour filled 
shapes. Simply drag the texture onto your main 
canvas. Keep the texture layer highlighted but 
Apple-Click (Ctrl-click) on the body shape layer to 
select it. Invert the selection and remove the 
unwanted texture (you've got the texture layer 
highlighted, right?). Give the layer a soft-light 
effect for now. 


ADDING 
TEXTURE 


Now to add more colour and detail to 
the image J 


1 You may also wish to drag the original 

photograph and full body shape over to the 
main canvas. They both serve as useful guides as you 
progress, and the photograph may be a good source 
of selectively applied texture. 


Add more paint texture — this layer is actually 
1 part of an older illustration. Start messing 
around with layer effects, selection and deletion. If 
something looks good, but it’s not the effect you're 
after, either hide the layer and do it again, or save the 
image at this point. You'll be surprised at what comes 
in handy during this phase of design. 


NAMING LAYERS 

Simple advice but worth repeating: don't forget to name 
ALL your layers. You might think it goes without saying, 
but just try and find that 5mm wide soft light screen layer 
when you've got 80 other unnamed texture layers vying 
for your attention. Of course, you're also faced with the 
hefty task of naming many layers of abstract mess. Take 
a tip from the Americans and use numbers. 


OR ue Tr ‘ 
12 Time to open up more texture. We created this 
particular canvas by layering lots of screen 
effect textures and shapes on a hi-res black 
background, resulting in a densely packed image with 
a variety of potential uses. Create your own textures 
by combining paint effects with vector-based shapes 
and hand drawings. Just throw everything at it and 
have fun. This texture will also form a large part of 
the final image. 


1 Our character is holding a small handbag. You 

shouldn't just leave it as a black block-fill, 
though, because that would be boring. Get some 
inspiration from relevant sources and think about 
what you want to do with it. 


We've used an EPS pattern we already had on 
1 our hard drive. The cleaner lines of an EPS still 
lend themselves well to pattern fills if used at the right 
scale — but, of course, you can use whatever you 
want. Always make it look like it is or could be a fabric 
texture, though. 


1 Duplicate the original texture shape and use 

multiple soft light layers to add texture and 
tone. Select one of your arm shape layers (see Step 
9), but this time grab some shadow from the original 
photograph. Now apply the halftone filter for a new 
texture effect. If you didn’t use the photo, create a new 
layer and select a small area with the Lasso tool. 
Apply a gradient, then half-tone. 


1 Add flesh tones by selecting the arms and 

filling with colour. Bring in more texture — get 
looking around for stuff to scan in. Start thinking of 
brighter colours and use Levels to give your textures 
extra punch and contrast. 


1 7 Fill the legs with yet more texture (again, see 
Step 9). Don’t worry if things look garish, 
because you're still only laying the foundations. 
That's not to say you shouldn't leave the legs like this 
if you wish, though... Use Hue/Saturation to 
minimise the ‘cheap market bargain’ effect. 
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Illustration 


PART 3 MORE 
DETAILS 


Continue developing and 
strengthening your image, bit by bit 


1 After toning things down somewhat, and 
adding more block colours over the legs, 
things should be taking shape. Allow a bit of texture 
to show through for maximum effect. Keep 
experimenting with Hue/Saturation, adding 

texture and so forth. 


1 Think about making the bag stand out from 
the rest of the figure; it’s as good a focal point 
as any. A bright yellow should work well, or whatever 
complements your overall colour scheme. Cut out the 
bag area, duplicate it, select the duplicate, then fill 
with bright yellow. Now apply a screen layer effect. 


2 Add more Halftone to the upper arm/shoulder 

area. Also, consider selecting the entire 
canvas and cropping. Save an un-cropped version 
before you do this, though — just in case. Your 
‘double-page spread’ Photoshop file is probably 
staring to devour precious RAM, so trimming unseen 
areas will cut down the size of the file. 
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2 1 If you feel your image is still a bit dingy, be 

bold. Bring on some pink. Select the leg areas 
and fill them with hot pink or pulsating purple, and 
apply screen effects. You'll notice that some of the 
underlying, darker body shapes are showing through. 
Time to get up close and impersonal as you ruthlessly 
trim the excess. 


2 Use Paths or the Polygonal lasso tool to chop 
off and define the lower part of the dress. 
Here, we're actually creating a tiny new layer to act as 
a sort of digital correction fluid. It’s an old-school way 
of working but it keeps you on your toes as you 
continue to add more layers. It also helps you feel 
like you're creating and crafting the image rather 
than just hitting buttons. 


2 Things are looking much brighter now. It’s also 

looking a little sunnier and more cheerful, but 
not too much, thanks to that subtle background. We'd 
say it’s autumn. Hold on, it is. 


2 Now to really get the wind blowing... Do an 

image search with Google and get an idea for 
how material actually looks when blowing in the 
wind. Make a new layer and use a combination of the 
Paths tool and polygonal lasso too! to create the basic 
shape of the billowing dress. There’s nothing to stop 
you adding more texture to the arms, either. 


2 The girl needs a few dress straps or 

everything's going to blow clean off. Use that 
old ‘select-and-fill correction fluid’ method we 
discussed in Step 22 and add some. Continue to 
tweak arm texture as you see fit. 


PART 4 FINAL 
TOUCHES 


Incorporate these elements to 
perfect your image © 


26 Now's the time to bring over another copy of 
that black and white texture layer (or, more 
accurately, your own version of this) that you saw in 
Step 12. In fact, bring lots of these over and start 
adding screen effects like they're going out of fashion. 


27 Keep in mind that you're attempting to make 
the dress look like it’s blowing in the wind, so 
think about how this may look. We’re not attempting 
photo-realism, though, so don’t be too strict on 
yourself. Keep chopping into these layers with the 
Polygonal tool and teasing them out towards the 
right-hand side of the image. 


2 To create a similar effect to the illustration that 
introduces this tutorial, you need to fill almost 
the entire right-hand side of the image with white. A 
good tip for creating extra texture is to scan ina 
screwed-up piece of paper. Convert to greyscale and 
really punch up the contrast and levels, then simply 
drag the result onto your canvas and use the screen 
effect. It’s a quick, natural looking way of filling any 
unwanted gaps without using selection tools. 


2 Now it's time to shift into a lower gear and add 

extra elements to bring your image to life. 
Nothing conjures up the feeling of autumn like dry 
leaves blowing in the wind. We scanned this leaf 
directly into Photoshop. 


3 Bringing small objects to the foreground is a 

neat way to add depth to your image. Like this 
leaf, for example. Scan in a leaf, cut around it and fill 
with black (just for a guide). Now drop it onto the 
main canvas. Bring over another texture layer and 
position above. Select the leaf outline and invert the 
selection (just delete the extraneous stuff). Now 
duplicate the layer and fill the duplicates with an 
appropriate colour, before setting them to the Colour 
layer effect. Experiment with the Eraser tool with a 
blurred edge, too. 


x” Yas “g 
3 The artist's easel is simplicity itself. Take a 

photo of an easel against a white wall (or just 
draw one), bring the image into Photoshop (digitally 
or otherwise), drag it to your canvas, then scale 
accordingly. Multiply the layer, and there you have it - 
the canvas is simply a square cut from one of your 
textures, dragged over and scaled. Duplicate the 
canvas layer, and use the Hue/Saturation option to 
reduce its Lightness level. Hey presto! An instant 
drop-shadow. 


3 Use the same principal to create the pencil — 

crayons sticking out the bag. Take a photo, © 
import into Photoshop, then simply cut around the 
edges. Now drag and drop, and scale to size. Select 
the bag layer by Apple-Clicking (Ctrl-clicking) then 
use that selection to delete the relevant section of the 
pencils so that they’re clearly inside the bag and not 
just randomly placed over the top. 


3 To add the bird use Multiply and decrease the 
layer opacity a touch. To add the plane, find a 
photo, cut around it, then drag and drop your 
selection. Apple-Click (Ctrl-click) the layer and choose 
two colours in the Linear Gradient Tool box. Select 
Foreground to background and apply the gradient. 


FINAL STEP 


| 
Fe there you have it. You may want to add a 
colour wash (for a similar effect to the other _ 
images in the magazine). Again, it couldn't be easier. 
Create a new layer, push it to the top of the stack, fill 
with your desired colour, then choose your Colour 
layer effect. Bring the opacity rightdown-and 
season to taste. Don’t forget to flatten and save! L] 
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ILLUSTRATION BY DEREK LEA 
derek@dereklea.com 


ILLUSTRATION 


PHOTOSHOP FACE/OFF 


Create this alien portrait, which appeared on the cover of a 
Computer Arts Photoshop Special, by combining an ordinary 
face with architectural details, with this comprehensive tutorial 


This alien portrait was created by illustrator Derek 
Lea, and over the next few pages you'll find the 
process outlined in full. Here, Derek explains how 
the idea was conceived for a magazine cover. 

“This image came about when | received an email 
from Matthew Harvey, Art Editor for Computer Arts 
Special,” Derek begins. “He had a vague concept for 
the cover of an upcoming Photoshop special. This 
time we were going to do something a little different. 
The subject was to be compelling and not so literal. 
He was asking for a woman's face on the cover, but 
not a woman of this world; he wanted something 
alien or elfish-looking, with some swirling bits of 
detail around her eyes. 

“| don’t think either of us really knew what it 
would end up like for certain. | always applaud an 
art editor who has faith in an idea that could go in 
any number of directions —-| imagine it's no easy 
feat to pitch the concept to the administrative folk 
who have to approve the concept.” 

He explains the early stages: “| downloaded a 
supplied photo of the model that was shot by The 
Walcot Studio in Bath (www.thewalcotstudio.co.uk). 
When | saw the image and how good it was, | felt 
pressure. This was a great shot of a fantastic model — 
if this cover went wrong it would be all my fault. 

“In thinking how to make her alien, we agreed 
on a desaturated greyish appearance, and | sent a 
quick test to Matthew of how the horizontal flipping 
of half her face was going to work. We agreed that 
this was the direction to go in. The difficulty was in 
the detail. | had nothing to go on except for a couple 
of conversations with Matthew. Some ideas tossed 


around were possibly ornate furniture details or fine 
ironwork. It was the idea of architectural details that 
struck me as the way to go. | was thinking of a group 
of buildings in Toronto's financial district that always 
captivated me as | walked by them. There are dozens 
of them, littered with exquisite details.” 

Derek set out with his camera on a freezing cold 
day. “Anyone who's been in Toronto in December 
will know that it’s cold. Thankfully, there wasn’t any 
snow around at the time, so at least the buildings | 
wanted to shoot would be clear. Sure, it would’ve 
been nice to wait for warmer weather, but we just 
didn’t have the time. In many instances, | would 
stand on things to get up higher, so that the 
perspective of the shots was dead-on; things like 
bicycle racks, newspaper boxes and parked cars ina 
couple of instances. There was one point where | was 
standing on top of a newspaper box and a bus pulled 
up —| was eye to eye with the passengers! Naturally, 
they were looking at me like | was insane. And | was 
insane, outside in December climbing on things in 
downtown Toronto to get just the right images. 

“After taking over 70 shots, | called it a day. My 
hands were aching from the cold and | hate shooting 
with gloves on. | narrowed my selections down to 23 
shots to show Matthew for the go-ahead. He agreed 
it was going to work. After carefully looking at all the 
shots, and places on her face we could blend them 
in, |chose the five most appropriate for this job and 
got straight down to it. The result is the image on the 
facing page, with the process revealed step by step 
on the following pages. Have fun! | know | did, except 
for the aching fingers part, of course...” 


Photoshop Face/Off & 


ON THE DVD 
~~. You'll find 
all the files you 
( © need, along with 
the original portrait 
shot on the cover DVD in the 
folder 1_faceoff_p22. These 
files are for the purposes of 
this tutorial only, and are not 
to be reproduced elsewhere or 
used in any commercial 
projects. 


Artwork, photography and 
expertise by Derek Lea, 

[e] derek@dereklea.com, 

[w] www.dereklea.com. 

The portrait shot was 
supplied by The Walcot Studio 
(www.thewalcotstudio.co.uk). 


BeLow LeFT Illustrator Derek Lea risked life 
and frozen limb to take 70 architectural 

shots in Toronto's financial district. Find 
out how he worked these into the final 

illustration on the following pages. 


BeLow This portrait shot was taken by 
The Walcot Studio in Bath - a digital 
photography studio that’s contributed 
to our 51 tips, on page 34. 
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PREPARING 
THE FACE 


We'll start by flipping half of the face, 
doing some colour adjustments and 
then smoothing her complexion J 


Open the file Face.psd (on the DVD), then 
duplicate the background layer by dragging it onto 
the Create New Layer icon in the Layers palette. On 
the duplicate layer, choose Edit>Transform>Flip 
horizontal from the menu to flip it over. Use the 
Rectangular Marquee to draw a selection over 
the right half of the model's face. 


Now choose Layer>Add Layer Mask>Hide 

Selection from the menu. Hold down Command 
and use the arrow keys to nudge the layer a little to 
the right and up slightly. Watch her lips to see how 
things are matching up. Now select the Brush tool, 
choose a large soft brush, and paint over the harsh 
line down the centre of the mask. 


Riel REN al 


Create a Hue/Saturation adjustment layer and 

desaturate by 10. Create a new layer with a 
Blending mode of Colour, and fill the entire layer 
(Option+Delete) with a foreground colour of pale 
purple (C-22,M-15,Y-4, K-0). Create a Selective Colour 
adjustment layer and make sure Absolute is checked. 
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ABSOLUTE 


We use the Absolute method in Selective Colour because 
it creates a more dramatic effect. Note that you can only 
affect specular white using Absolute, because it has no 
initial colour value. The Relative method is relative to the 
content of existing colour within a pixel. If you had 10 per 
cent cyan and then increased the cyan by 10 per cent 
more, for example, the result would be 11 per cent. But 
if you used Absolute, it adjusts the colour using an 
absolute value, resulting in 20 per cent cyan. 


In the reds section of the Selective Colour 

dialog pulldown menu, boost the cyan slider 
by 9, the magenta by 33, and reduce the yellow 
by 17. In the neutrals section, increase the cyan 
by 10 and decrease the magenta by 5. This helps 
pale the skin and brighten the red lipstick slightly. 


Now it's time to hide the T-shirt and fix up the 

hairline a bit. Select a soft brush with an opacity 
of 100 per cent. Create a new layer and sample the 
dark background colour using the Eyedropper tool 
(Option). Now paint over the T-shirt and the top area 
of the hairline; you may find it easier to use slightly 
smaller brush sizes around the jaw and ears. 


NAMING PATHS 


When you create a new path in Photoshop, it’s named 
Work Path by default. So it's a good idea to name a path 
in the Paths palette if you want to keep it. To do this, 
simply double-click the Path icon in the Paths palette 
and enter a name in the resulting field. Remember, if 
you don’t name your path, you could accidentally lose it. 
When your work path is inactive and you create another 
path, the work path you had earlier is automatically 
replaced with your new work path. 


Duplicate this layer and use Edit>Free 

Transform>Flip Horizontal. Hold down the 
Command key or use the Move tool (V) to slide it to 
the left side of the image so that it covers it (just like 
the right side). Select the Pen tool and draw a closed 
path around each eye. Command-click the Path icon 
in the Paths palette to generate a selection from it. 


an Sece_mee sates er vin Nooo sty 


Create a new Selective Colour adjustment layer 

with the current selection active. In the whites 
section of the pulldown menu, subtract 16 from the 
cyan, magenta, and yellow channels. Now draw 
a closed path over each iris. Make a selection and 
create a new Selective Colour layer. This time, in 
the neutral section, subtract 25 from the magenta 
and the black channels. 


et r_sees_seer_ greenies 
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Make a selection from the same path again, but 

this time create a new Hue/Saturation adjustment 
layer, and increase the saturation by 25. Now create 
anew layer and select the Clone Stamp tool(s). 
Choose a brush tip size of around 65 pixels and 
make sure that Use All Layer and Align are enabled. 
Sample nearby areas of clear skin (Option) and then 
clone out her freckles on this layer. 


Create a new layer. Select the Brush tool and 
use a combination of large and small soft 
brushes with opacity settings between 10 and 40, 
gently painting over the natural blemishes in her 
skin on this layer. Use the Eyedropper tool to sample 
different underlying colours for different areas. 
Keep painting carefully until she looks very smooth. 


CHEEK DETAILS 


Add some of those architectural 
details using Free Transform, masks, 
layer combinations and Liquify J 


0 In the file Detail1.psd, generate a selection 

1 from the existing path. Use the Move tool to 
drag the contents of your selection into your working 
file as a new layer. Use Edit>Free Transform to scale 
and rotate it approximately into place. Duplicate the 
layer and change the mode to Overlay. Command- 
click the layer’s icon to generate a selection from it. 


Create a new layer with a Colour blending 
1 mode. Sample a colour from some nearby skin 
and fill the selection (Option+Delete) with the colour. 
Deselect (Command+D). Link these three new layers 
in the Layers palette and merge them (Command+E) 
into a single layer. Add a layer mask, then use various 
soft brushes to softly mask out the hard edges. 


LAYER STACKS 

Building up duplicate layers with different blending 
modes is a quick and easy (non-linear) way to 
experiment with different effects. Sometimes you'll 
hit upon a winning combination that you can add to 
your bag of tricks. The method used here, of duplicating 
anormal layer, changing it to an overlay layer and then 
adding a colour layer on top of the two, makes the 
architectural details share similar colour and contrast 
to the face. Definitely one to make a mental note of. 


1 Bring in the piece of detail that is enclosed 

in a path from the file Detail2.psd. Use Free 
Transform to reshape and rotate it into place on 
the girl's cheek. Use the same method you used 
previously to create a stack of layers, then merge 
them. Now add a mask and gently soften the edges, 
so that this piece looks like it belongs inside the other. 


= 


3 Link the two layers containing the pieces of 

1 detail and merge them. Choose Filter>Liquify 
from the menu. Switch Backdrop on and choose 
Background Copy from the drop-down menu. 
Initially, use the Warp tool with a large brush size and 
low pressure setting to adjust the shape of the detail 
so that it follows the facial contour more closely. 


LIQUIFY 

The Liquify tool is highly intuitive to use, especially with 
a Wacom tablet. A pressure-sensitive one is best — 
because it genuinely gives you the feeling you're 
painting something soft into shape. Liquify can prove 
frustrating to the beginner, though, so first off use slight 
pressure settings and large brushes; you'll make subtle, 
gradual adjustments this way. Take your time and be 
patient — jump in with a high-pressure setting and small 
brush and the filter will feel out of control... 


1 Next, use the Bloat tool to swell areas that 

need to look raised, and the Pucker tool to 
shrink areas that need to look recessed. Take your 
time here, and use a very low-pressure setting to 
get things looking just right. Use a large brush size 
to avoid making obvious wavy and warped lines, 
where smaller strokes would meet. 


1 When you've finished, click OK. It may take a 

minute or two to apply the effect. Do not be 
frustrated if your effect doesn’t match ours exactly. 
Liquify is such a (pardon the pun) fluid medium that 
it's very difficult to reproduce the exact effect twice. 
Go back into the Liquify filter a second or third time 
if you need to to improve your work. 


BROW DETAILS 


Time to add more architectural 
details to the brow and forehead 1 


ere 


Make a selection from the path included in 
1 the file Details3.psd. Drag the contents into 
your working file as a new layer. Use Free Transform 
to rotate, scale and distort this piece of detail so that 
it fits nicely over the top of the model's brow. Create 
a layer stack, as you did for the previous details, 


then link and merge the layers and add a layer mask. ~ 
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17 Use a small soft brush on the mask to remove 
the hard edge of the piece of detail. Use the 
Radial Gradient tool with a foreground colour of black 
and a setting of Foreground To Transparent to gently 
blend the area that overlaps the bridge of the nose. 
Draw a rough Lasso selection on the upper right 

area and use the Radial Gradient there, too. 


{ego 


8 Create a new layer and drag it under the brow 
1 detail layer. Use the Clone Stamp tool on this 
layer to remove the eyebrow that's still showing. As 
with Liquify, you get a better result if you use a large, 
soft brush with a low opacity setting, going over and 
over certain areas. Paint a little shadow under the 
detail using a soft brush on this layer. 


1 Create a new layer on top of all the others with 

a blending mode of Lighten. We now want to 
concentrate on blending the top of the detail into the 
forehead. Use a soft brush with a low opacity setting 
to gently paint over the top of the detail, using colours 
sampled from the forehead. 
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20 Make a selection from the existing path in 

the file Detail4.psd. Drag the contents into 

the working file as a new selection. Resize and 

rotate the piece into place using Free Transform. 
Create a layer stack, merge it, and create a layer 
mask. Use a combination of big and small soft 
brushes with varying opacities to mask out the edges. 


2 Bring in the piece of detail from Detail5.psd, 

and do the same thing you've done four 
times already. Resize, stack, merge and mask. This 
time, though, move your layer in the Layers palette 
so that it’s sitting underneath the layer that has the 
brow detail on it, but still sitting above the layer 
that you cloned the eyebrow out on. 


PART 4 
FINISHING UP 


Now to bring detail to the other side 
and add a few finishing touches J 
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2 Link all the layers that make up your details, 

including the layer under the brow and the 
lighten layer above it. Now Merge them. Duplicate 
the merged layer and choose Edit>Transform>Flip 
Horizontal from the menu to flip it over. Use the 
Move tool and drag the layer over to the left and 
move it into place, as shown. 


2 Click on the foreground colour icon to access 
the Colour Picker. In the Picker, create a new 

foreground colour of C-71, M-17, Y-12, K-0. Create 

a new layer with a Colour blending mode and 

an opacity setting of 22. Fill the layer with the 

foreground colour (Option+Delete). Duplicate the 

layer and change the blending mode to Soft Light. 


pia ne ‘I 

2 Generate a selection from the iris path you 

created earlier. With the selection active, 
create a new Hue/Saturation adjustment layer. 
Increase the Saturation by 35. The idea for the 
Photoshop Special cover was to have the eyes jump 
right out at you. Increased saturation against such a 
desaturated face really helped create this effect. 


FINAL STEP 


ell, pat yourself on the back - you've done it. 

Now you know the secret behind the most 
popular Photoshop Special cover to date. If you still 
feel as if you have the strength left, why not create 
one more new layer, then use the Clone Stamp tool 
with a small brush tip to Clone and clean up the 
eyelashes, just to smarten things up a little bit. 


PHOTOSHOP 


Photoshop was Originally conceived as a 
photo-retouching tool, back in February 1990. 
Now, of course, its image-editing capabilities 
are endless, and PS7 offers an advanced 
feature-set for manipulating photographs. 
Here, we look at giving a regular photo a 
retro style in both colour and tone. 


GOING RETRO 


S anyone who has experienced 
Photoshop should know, there 
are many ways to change the 
colours of an image, and several 
methods for aging photographs. Here, we 
offer a few solutions for creati ng the effect 
quickly, then apply one technique 
ourselves in the mini walkthrough below. 
The first thing to consider when ageing 
photographs is the decade you wish to 
recreate. Older photographs tend to be 
less saturated then modern ones, and 
they usually have a colour cast. The colour 
cast depends on the era from which the 
photograph was taken. Photos from the 


This is the original photograph to which we're going to 2 The first thing to do is go to Filter>Noise>Median... 
1 apply our effects in Photoshop. It's quite a modern- 

looking image but it will serve our Purpose well. Make 
sure your image is in RGB to access the relevant filters. 


Grain to 5, Highlight Area to 6 and Intensity to 4. This 
gives a grainy effect in the midtones and shadows, and it 
removes the grain from the highlights for a natural look. 


Here we've set the radius to 2 pixels to flatten the 
colours in the image. This degrades the image slightly, and 
softens the highlights to make it look like an older photo. 


Now we go to Filter>Artistic>Film Grain and set the To create a colour cast we'll add a Colour Fill layer 
3 4 filled with 70 per cent Magenta, 100 per cent Yellow. 
The layer is set to Overlay at 50 per cent Opacity to 
complete the retro 70s effect. 


70s generally have an orange cast, while 
pictures from the 60s have a greater 
amount of yellow in them. It depends on 
what look you are trying to achieve. 

If you're looking to create a 50s look, for 
example, a little airbrushing will be in 
order to get that flattened effect, especially 
on peoples’ faces. It's pretty simple. You 
need to add a layer with the Blending 
mode set to Colour to paint on. Choose a 
colour palette that reflects the era —in this 
case the colours will be mainly pastel 
shades. Then, with a soft-edged round 
brush, you can add a touch of colour to 
the cheeks and lips on your subjects’ faces 
and airbrush over their clothing. 

Alternatively, some simple but quite 
effective solutions can be achieved simply 
by using Photoshop's indigenous filters 
and adjustment layers. For example, try 
using a Colour Balance layer—you can get 
good results by sliding the triangles from 
left to right, changing the whole look of 
an image. In our case, for creating a retro 
style, experiment with swapping the Cyan, 
Magenta and Yellow for Red, Green and 
Blue respectively to create the right colour 
cast for the era you are aiming for. The 
Tone Balance can be left on Midtones 
to affect the general appearance of the 
image, or you can adjust the Shadows, 
Midtones and Highlights individually 
for a more precise result. 

Filters, such as Film Grain, give 
wonderful results when used carefully and 
subtly, especially when used after 
applying the Median filter to flatten the 
image slightly first. The beauty of this filter 
is that the intensity of the effect can be 
altered in the highlight areas — this 
bleaches out the grain and gives a more 
natural photographic look to the image. 

Follow the quick walkthrough here, 
where we've used these Photoshop 
features to make a modern photograph 
date back to the 70s. Remember, whether 
you're a new, intermediate or pro 
Photoshop user, you can find a mass of 
information in Computer Arts and 
Computer Arts Projects every month. And 
don't forget to check out the tutorial on 
Page 22 that begins with a photograph 
and ends with a stunning piece of artwork 
by Canadian illustrator Derek Lea. It covers 
the arts of retouching, re-colouring, 
blending and more in great detail. 


INFO Expertise supplied by Frank Bartucca, 
bartucca@btinternet.com 
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Tllustration 


ILLUSTRATION BY JASON ARBER 
www.pixelsurgeon.com 
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Manga style @ 
ILLUSTRATION 


MANGA 
STYLE 


We show you how to 
create a Manga-style 
illustration using nothing 
more than Photoshop, 
Illustrator and a pencil 


Traditionally, the term Manga refers to Japanese 
comic books, but it’s now commonly used to 
describe the Japanese style of illustration, and 
artwork influenced by the comics. Manga can be 
traced all the way back to the ukiyo-e woodblock 
portraits of the 19th century — especially those by 
Tsukioka Yoshitoshi — although the father of 
modern Manga, Osamu Tezuka, was also heavily 
influenced by Walt Disney and Max Fleischer. 
Tezuka’s best-selling comic was Shin Takarajima 
(New Treasure Island), which appeared in 1947. 
The artist was also responsible for Japan’s first TV 
show of animated cartoons, the hugely popular 
Astroboy, in 1963. 

Many modern artists and illustrators in Japan 
and worldwide are creating artwork in the Manga 
tradition, such as Yuzuru and Kanako from Manga 
Media (www.Manga-media.com) and LA-based 
Kozy and Dan (www.kozyndan.com). It’s also 
possible to see the influences of Manga in the 
work of artists like Preshaa (www.preshaa.com) 
and CAcontributor Autumn Whitehurst 
(altpick.com/members.php?id=11198). 

The Manga style often (though not always) 
features characters with huge, almond-shaped 
eyes with glinting highlights, overly large heads 
and bodies with exaggerated limbs. The clean 
lines and simple shapes lend themselves to being 
captured in vector applications such as Adobe 
Illustrator, and in this tutorial we'll be using 
Iilustratorto create an image that will then be 
rendered and treated further in Adobe Photoshop. 


ON THE DVD 
“Look on your disc in 
( CS) \ the 1_manga_p28 
\ \* _ } folder for the files 
~___ you need to follow 
this tutorial. Artwork and 
words by Jason Arber: 
jason@pixelsurgeon.com, 
www.pixelsurgeon.com. 
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PART 1 
ILLUSTRATOR 


Getting the basic proportions 
right is a vital first step 7 


i 


The tutorial begins with an illustration sketched 

out roughly with pencil on paper. For those less 
artistically inclined, don’t panic —- we've included this 
example sketch with the files on the cover CD. Use a 
scanner to import the image into Photoshop where 
you can clean it up if necessary. 


> INSIGHT 


Open Adobe //lustrator and create a new 

document (File>New). Because ///ustrator will 
be used for the source material, rather than the final 
image, the actual document size is unimportant — an 
A4 RGB starting point is fine. 


It’s best to divide the illustration up into key zones, 

such as the limbs, at this point. Working from the 
bottom up, start with the left arm. Create a new layer 
by clicking on the documenticon at the bottom of the 
Layers palette and name it accordingly. 


# Prat 
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Place your scanned artwork onto the document 
(File>Place) and double-click the layer in the Layer 

palette to specify this artwork as a Template in the 

layer options. This locks the layer so you don’t 
accidentally move or draw over it. 


“ iA SO! f vi 
Using the Pen tool with a fill set to Transparent, 
and a stroke set to a bright contrasting colour and 
narrow weight, begin to trace around the arm, trying 
to use as few points as possible. 
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Once you're happy with the traced image, fill the 

lines with your desired colour scheme. Once each 
zone has been completed, hide the layer by clicking 
the eye icon in the Layers palette so that it doesn’t 
cover other areas you want to trace. 


Don't worry about overlapping your lines, 
because once you've filled them with solid 
colour, the different areas will stack naturally. You can 
change the stacking order within a layer by selecting 
Object>Arrange from the menu, or by clicking the 
triangle next to the mini preview in the Layers palette 
and dragging the sub-layers up and down. 


You can use paths with no stroke or fill to carve 

up your underlying shapes quickly and simply. 
Select the shapes to be cut, together with the dividing 
paths, and then click the Divide icon in the Pathfinder 
floating palette. This will dissect your artwork so that 
you can colour different areas individually. 


The Divide method is perfect for more complex 

areas, such as the eyes, where the tops and 
bottoms of the pupils can be easily removed. It’s also 
a good idea to spread the facial elements over many 
layers, so that you can keep track of different parts. 


1 At this stage, don't be afraid to give certain 
elements (such as the eyes) a gradient to add 
acertain amount of lift to the otherwise flat artwork. 
Apply a gradient to your shape, which can then be 
customised by dragging new colours from Swatches 
palette onto the gradient line in the Gradient floating 
palette. Drag the little triangles to fine-tune the effect. 


Unify your artwork by creating a thick keyline 
1 around the whole illustration. With all your 
drawn layers unlocked (don't include the template 
layer), select all the artwork (Select>All) and copy the 
shapes (Edit>Copy). Lock all the layers again, create a 
new layer and paste in the same place (Edit>Paste in 
Front). Now select all the paths and make them a 
single shape with the Add To Shape Area icon in the 
Pathfinder palette. With the new layer behind the rest, 
give your new shape a chunky stroke. 


1 2 The final touch in //lustrator is to bend some 

Japanese text (or any text) using the Warp 
filters. Select the words with the selection arrow and 
choose a warp effect (Effect>Warp>Arc). Make sure 
the preview box is checked so you can see the results 
of moving the sliders around. 


PART 2 PHOTOSHOP 


Time to combine and develop your 
Illustrator artwork in Photoshop 


1 In Photoshop, create a new document at 

the size you'll need the artwork (File New). 
Although the artwork is destined for print, it’s okay to 
work in RGB and convert the file to CMYK later. 


1 Scan in a painted background or some other 

interesting texture in order to provide a little 
contrast to the ‘flatness’ of the ///ustrator artwork 
you'll be importing later. 


1 Create a new layer by clicking on the document 

icon in the Layers palette, then create a simple 
gradient with the Gradient tool by clicking and 
dragging. Hold down the Shift key while dragging to 
constrain the gradient to a perfect vertical. The 
gradient can fade to transparent by selecting the 
appropriate preset in the Options bar. 


16 Using the Elliptical Marquee tool from the 
Tools palette, draw some simple overlapping 
circles in a fairly random fashion. You can use the 
tool to select areas to delete from the main area 
(Edit>Clear or simply backspace). 


Repeat this process using different colours and 
17 layer blending modes (which you can access 
from the dropdown menu at the top of the Layers 
palette). Multiply and Overlay are good choices, and 
enable the underlying texture to show through. 
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Illustration 


If you have any other /ilustrator or EPS files 
1 lying around, try placing them into your 
artwork (File>Place). Complex vector files often take 
some time to render in large Photoshop documents, 
don't forget, so make yourself a nice big mug of 
coffee while you're waiting... 


1 Use a Multiply blending mode at a low opacity 

to knock the placed graphic back a little. Create 
a layer mask by clicking the layer mask icon at the 
bottom of the Layers palette, and use the Gradient 
tool fill with a gradient to make the placed graphic 
taper to complete transparency. 


20 Now place your main Manga illustration 
(File>Place). It's possible to position, resize 
and rotate placed images before rendering them. 
Attempting to enlarge or rotate an image after 
rendering, however, could result in the crisp lines of 
your artwork being corrupted or losing definition. 
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21 Place another copy of the illustration behind 
the main copy, and use a combination of layer 
mask gradients and blending modes to make the 
duplicate part of the background texture. 


Add texture to the rendered artwork with a 
scan of rust or spattered paint. It’s possible to 
apply the scanned texture to the Manga illustration 
only, by creating clipping layers. Make sure the 
texture scan is above the illustration and Alt-click 
(Windows) or Option-click (Mac) between the layers. 
You can create as many clipping layers as you like. 


a 


2 Clipping layers can have blending modes 
and layer masks, and you can treat them in 
exactly the same way as you would any other layer. In 
this case, a clipping layer has a layer mode of Multiply 
and a gradient layer mask to make the figure darker 

and more textured towards the bottom. 


24 Use the Pencil tool at a small size to scratch 
through the overlaid textures by drawing in 
black onto the gradient masks, as shown. 


FINAL STEP 


he final touch is adding the warped text, which 

you can either place yourself, or copy and paste 
into the artwork. Making sure the artwork has been 
saved, flatten the image (Layer>Flatten Image), 
convert to CMYK (Image>Mode>CMYK Colour), 
then save the result as a TIFF (File>Save As). _] 
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PHOTOSHOP 


While Photoshop's Blur filters are pretty 
self-explanatory, Sharpening isn’t quite as 
easy to get the hang of. There are many ways 
to sharpen up your images in Photoshop, 
and even more ways to manipulate those 
procedures. Here, we explain how you can 
obtain precise control over where and how 
sharpening is applied. 


SHARPENING IN PHOTOSHOP 


This is the original image. It’s slightly soft but it contains 
a high level of detail. 


@ 


ol? 


SHORTCUTS 


he first question to ask, is does 

your image need sharpening? 

If it's a scanned photograph 

destined for print then it probably 
does. The easiest way to find out is to 
sharpen the image and see what it looks 
like. Use Command+Z to undo the 
sharpening and return to the original 
image — this is a simple way to check 
whether improvement is worthwhile. 

If the image has indistinct detail or is 
deliberately blurry, sharpening may not 
be suitable — it can reduce the softness of 
the image. But what if you have a photo 
with some areas in focus and some out of 


We can apply a heavy sharpening with a medium 
radius to sharpen the whole image, but in some cases 


this may not be desirable. Instead, we make a duplicate 
layer and sharpen that. 


Now we can use Layer Options to make either the light 

or dark pixels in the sharpened layer transparent. Here 
we have removed the lightest pixels so that only midtones 
and shadows are sharpened. 


In this image, the dark pixels have been removed 
so that only the highlights have been sharpened. 


focus? Sharpening the whole image will 
sharpen noise and grain in the blurred 
areas, to the detriment of the image. There 
are a number of techniques, the first being 
to use the Threshold feature within the 
Unsharp Mask filter. When increased, 
Threshold prevents noise and grain being 
sharpened, so it’s ideal for mixed-focus 
images. The other settings, Amount and 
Radius, control the contrast effect that's at 
the heart of all sharpening filters. 

Sharpening finds areas of contrast 
(a light pixel next to a dark pixel) and 
increases that difference. It’s like applying 
levels to the image, but only to areas of 
detail. These tend to be borders and lines 
that make up the shapes in the image; 
flat colours are not affected. The Amount 
slider controls the strength of the contrast 
effect, while the Radius controls how 
many neighbouring pixels are affected. 
Too wide a radius will cause the effect to 
become too obvious; too high an Amount 
can make the image bitty and noisy. The 
basic rule, is the higher the Amount the 
lower the Radius, and vice versa. 

Another is to use a mask. Just as you 
can blur through a gradient to create 
depth-of-field effects, you can use a 
gradient to sharpen an image. You apply 
the Sharpen filter through the mask 
(loaded as a selection), though it’s better 
to use Unsharp Mask with a low Amount 
and Radius applied multiple times. 

What the Unsharp Mask filter lacks, is 
the ability to vary the bias of the contrast 
effect, increasing the contrast of dark 
features more than light ones, and vice 
versa. There are third-party filters that do 
just this, and they can be very useful. 
There is a work-around, though. 

To affect only the dark details in an 
image, make a duplicate of the layer and 
apply any of the Sharpen filters. Double- 
click the layer to access its Layer Options. 
In the Blending section, move the This 
Layer White point slider inwards; this 
removes lighter pixels from the image, 
leaving only dark, sharpened areas visible. 
The unsharpened light pixels of the 
original image show through. You may 
need to apply a stronger sharpening 
than usual with this technique. To leave 
only sharpened light pixels, move the 
This Layer Black point slider inwards. 
Remember, you can feather the transition 
from visible to transparent by Option- 
dragging the sliders to split them. 


INFO Expertise supplied by Simon Danaher, 
simon.danaher@ntlworld.com 
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Great digital art is a result of good ideas, strong 
composition and a perfected technique. We ask 

ten leading experts to provide their top tips, 
not just for better illustrations and 
imagery, but for sourcing inspiration 
and promoting your finished works 
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ny professional illustrator 
or designer can tell you 
how tough the industry 
has become over the last 
few years. Finding work and keeping 
a steady flow of commissions in 
such a competitive market is a real 
challenge, but one that is being 
taken up by more and more talented 
students and enthusiasts every year. 
Evidently, the reputation and way of 
life of a successful digital artist is still 


‘ 
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Constantly striving to produce 
better imagery, use ideas well and 
promote your work are the only 
ways to succeed. To help you on 


massively outweighing the negatives. 


the way to success, we've highlighted 
five subject areas that will be of use 
to any digital artist. Five experts with 
a wide range of design talents have 
provided their essential advice on 
natural media effects, image 
manipulation, vector illustration, 
pixel art, and structure and 
composition. To accompany their 
advice, they've provided some 
stunning samples of their own work. 
Discover how Photoshop artist 
Catherine Mcintyre looks for creative 
ideas. Find out how to create an 
old-fashioned, selenium-tone 
photograph, with hints from The 
Walcot Studio. Follow Studio Output’s 
advice on choosing colours for your 
illustration. Take eBoy’s advice on 
selecting the right resolution for 
printing your pixel art, and consider 
Autumn Whitehurst's tips on keeping 
the right balance in your illustration. 
Use the advice on the following 
pages to brush up on your own 
techniques, to try new styles and to 
give your own illustrations a boost... 


for better images a 


35 Natural media: | 36 Photo 


37 Vector 38 Pixel art 39 Structure 
Catherine manipulation: The __ illustration: techniques: eBoy & composition: 
Mcintyre Walcot Studio Studio Output Autumn 
Whitehurst 
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CATHERINE MCINTYRE \ 


™ Catherine Mcintyre is a digital artist who lives and works in Scotland. She 
creates a rich range of imagery for magazine editorial, books, CD covers 
ml and greetings cards all over the world. Specialising in natural media effects 
using Photoshop, her work can be seen in books and on the WeD. tuo meintyre.dkx.ru 


Everything is about art, and art 
1 is about everything. Anything, 

no matter how mundane, can 
trigger connections in your mind and 
set you off on a new idea. Always try 
to carry a camera with you; the 
smaller digital ones are good for this; 
you can slip them into your pocket 
and capture the unexpected. Also, 
look at the work of people whose art 
you admire. It can make your own 
vision, and the direction you want to 
take, clearer. It also trains your eye to 
see good composition, colour 
management and so on, until it 
becomes second nature and you can 
get on with the fun bit - inventing! 


Sourcing interesting material 
2 is half the battle. 

A local hospital, for example, 
very kindly allowed me 
to access to their x-ray department, 
which has been invaluable. Often 
antique shop-owners will 
generously let you photograph 
their stock. Many publicly-owned 
and university museums in Britain 
also allow (non-flash) photography, 
but always check with them first. 
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Get texture into your work 
3 with lots of photographs; 

anything you notice: old walls, 
skips, hoardings... By using layer 
modes, the picture will develop 
depth - both visually and in terms 
of meaning. I like oldness in such a 
new medium;; it gives it ‘soul’! There 
is a reality and a truth in using objects 
which have been loved and which 
tell a story; they give veracity to 
computer art which could otherwise 
become too clean and surgical. 


Layer modes in Photoshop 
4 have to be the most important 

way of blending elements of 
your work. They allow each of the 
layers an influence, and help to avoid 
a ‘joined-together’ 
look. The right mode can unite a 
layer with the picture; find one that 
helps it to merge, vary its opacity, 
even duplicate it and assign different 
modes to each copy, to achieve a 
coherent whole. For some of my illos, 
I vary the figure’s application mode 
across the image. By duplicating the 
layer and masking, some areas can 
be in Luminosity mode, linking it to 
the background hue, some in Soft 
Light to make them recede, and 
some in Normal mode for strength. 


Instead of making complicated 
Le) selections 


of, for example, a tree's 
branches against the sky, try 
allocating the layer a different mode. 
By using, say, Multiply or perhaps 
Darken, you may well find you don’t 
need to make the selection at all. 


RO 


Sometimes a picture can be 
6 close to finished, and yet still 

lack ‘spark’. Try Adjustment 
layers; adding, say, subtly stronger 
contrast or saturation across an 
image can give it a lift. Sometimes 
an abstract shot of something softly 
colourful can help, too; using it 
blurred, so that its subject and tonal 
contrasts don't interfere in a Soft 
Light, or even Overlay layer mode at 
a low opacity, can enliven dull areas. 


to become so involved with an 
image you forget 
to save it periodically. Losing hours 
of work is demoralising, especially 
near deadline. Also, if you like both 
a saved version and a newer one, 
you can then Save As a new file 
and develop both. Keeping layered 
versions of pictures enables you 
to rework later if a new idea occurs. 


7 It sounds obvious, but it's easy 


Photoshop enables 
experimentation without 


destroying previous work. The 
History palette (Photoshop 5and 
later) is particularly useful. If you're 
not sure whether a series of steps 
has really improved the piece, check 
by scrolling through your changes, 
and make direct comparisons. You 
can set your own preferences as to 
how many steps are available. More 
steps will use more memory, so stick 
with an average number - say, 20 or 
25 - and save your work more often. 
You can still go further back in the 
image’s history if you need to, 
without sacrificing speed. 


Don't let the program 
| determine the piece. Use 

it over and over until the 
shortcuts and the controls are so 
natural that you don’t have to 
think about them any more; they 
can make you very conscious of 
the ‘how’ rather than the ‘what’ 
of the image. The best possible 
way to develop your skills and, 
most importantly, your own voice 
is to practise. Do take proper 
breaks (avoiding major headaches); 
five minutes is enough to let your 
eyes relax. And have fun! 


Artist's block can happen 
1 at any time, and it’s a 
tough one. The luxury of 


a day doing something else 
altogether can jump-start the brain. 
Or simply opening a new file and 
putting together archived scans can 
kick off relationships between them, 
and give you ideas. What a picture is 
about can change while 

it's developing (in personal work, of 
course — a commercial brief has to 
be followed!), so not being too sure 
of your message isn’t necessarily 

a problem; you may find out later... 


Make yourself a 
1 1 Website;-they’re 
invaluable for 


self-promotion. Send work to 
publishers who use similar imagery, 
or to magazines. Exhibit 

in art or photography exhibitions. 
Enter competitions. Even doing 
things for free can be a good idea 

to get you started. Charities are 
often grateful for a free Christmas 
card, and bands for a CD cover; in 
return, you get free advertising. 


main thing you're after is 

shooting a sharp shot. Get it 
right from the offset. The shot must 
be at the highest resolution possible; 
a TIFF (or, to get more out of your 
camera’s memory, shoot a hi-res 
JPEG). Think ahead as to where 
the image will end up - billboard, 
magazine, for personal use or Web, 
as this will determine your file size. 


1 As a digital photographer, the 


All images need colour 
2 correcting, whether to remove 
dust on the lens or 
a blemish on the face. You'll always 
need to correct the image levels, too. 
The effect, or look, that we always 
want to achieve is very simple: 
desaturating colour for a half-colour, 
half black-and-white effect... 


Using auto levels 
to best effect. 


..and this is how it’s 
3 done in Photoshop. Once 

the image is open, go to 
Image>Adjustments>Levels. Keep 
the Channel setting on RGB. There 
are two arrows in the window, black 
on the left for the shadows and white 
on the right for highlights. You'll 
notice peaks and troughs bring your 
black-and-white arrows in until they 
meet their respective peaks. This 
will immediately tidy up your image. 


Duplicate your background 
4 layer. Here's a little-known, but 

useful shortcut: instead of 
going to the Layers palette and 
selecting Duplicate Layer from the 
menu, hit Apple+J (Ctri+J). If you 
want to bring up options for the 
duplicated layer, hit Apple+Option+J 
(Ctri+Alt+J) instead. 
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PHOTO MANIPULATION 


THE WALCOT STUDIO 


mR 


W@ This Bath-based digital photography studio is run by photographer Paul 
wz O'Connor and agent Paul Hames, whose enthusiasm and vision have 
wa landed them a fast-growing list of clients, including Diesel, Orange and 


British Airways. As well as providing striking photography for a range of projects, 
the two Pauls are also keen to work on briefs, from initial concept to finished 
product. We asked them to provide ten top tips for great image manipulation, 
from techniques and tools to finding your OWN approach. ino www:thewalcotstudio.co.uk 


To achieve our desaturated 
5 look, we have a few house 

rules for using the Hue/ 
Saturation feature. Go to Image> 
Adjustments>Hue/Saturation. Hit 
the Colorize option. At The Walcot 
Studio we have two settings, as a 
rule, for the Hue setting — either 35 
for stark brown realness or, for a 
more cooler blue look, 200. Taking 
the saturation level right down 
to about 12 softens the effect. 


Once you're happy with the 
6 colour effect, it’s time to clone 

any blemishes, CCD spots and 
other unwanted bits away. Ona 
model's face, you always have some 
spots and hairs; it’s inevitable. Select 
the Clone tool, Alt-click on the area 
close to the spot, then move over 
spot and click again. It’s that simple. 
To clone across layers, check the Use 
All Layers box in the tool options bar. 
Be careful not to clone too much of 
your image at once. 


The flattened 
image With spots. 


You can use the Healing 
7 tool in Photoshop 7 in 

much the same way. Be 
warned, though: it can be quite 
hit and miss when aiming for 
professional, seamless results. 
But use it methodically and it can 
a very powerful tool. Make sure 
you refer constantly to the History 
window - you can go back to any 
command in the past if you feel 
you have overcooked the image. 


Have you ever wanted to 
8 simulate a black-and-white 
photograph as if it had 
been shot on film, perhaps like 
a hand-finished, selenium-tone 
print? Then here’s how. Go to 
Image>Mode>Grayscale and in the 
Filter menu choose Noise>Add noise. 
Set the amount on 21 in Uniform, 
then zip back to RGB colour by 
Image>Mode>RGB colour. Next 
go back to Image>Adjustments> 
Hue/Saturation and set the Hue on 
35. The result is close to a hand-toned 
print - and all from a digital shot, 
with no time spent in a dark room. 


Use the F key to quickly 

see your image at full screen, 

without bothering about the 
buttons at the bottom of the tool 
box. Hit it once for full screen with 
menu bar, again for full screen, and 
again to go back to the window view. 
In addition, you can use the 
Tab key to get rid of all tools and 
palettes. Command and + or - are 
very handy zoom shortcuts that 
every Photoshopper should know. 


The final tip: there is 
1 no set way of doing 
things with digital shots 


in Photoshop. There are two general 
ways to tackle images — either make 
them look like they 

have been ‘shopped’ or make 

them look like they have not. Read 

up, ask questions, mutate things 

and explore. Often, the most creative 
people are the most flexible... ? 


The finished 
colour image 
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| send you this message in order to have your advice. 
‘See you soon, thanks. 


VECTOR ILLUSTRATION 


STUDIO OUTPUT 


Output was formed in August 2002 by lan Hambleton, Rob Coke and 
Dan Moore. Clients of their work mainly come from the leisure and media 
industries, and include BBC Radio 1, mp3.com and Virgin Student. 

Here they share their tips for producing effective vector illustration. mrowww.studio-output.com 


Specialist illustrators often 
strive to find a particular style 
to call their own, to develop 
a trademark look. Look beyond the 
work of contemporary designers 
or graphic work for your influences, 
and don't be driven by the 
technology at your disposal. Most 
good work starts from a sketchbook 
and a thorough research session. 


simplify layouts using a grid. 

Geometric planning needn't 
make your work look blocky but can 
help you to resolve matters of weight 
and poise. Experiment with 
asymmetrical designs, and look at 
how the grid can help to equalise 
these compositions through careful 
colour usage. 


2 To aid compositional balance, 


When constructing 
diagrammatic-type 
illustrations with a lot 
of linear detail, use different line 
weights to help add depth to the 
piece. Stroke thickness can help 
to identify outer edges or particular 
details that need highlighting. 


When creating solid 

objects with curved edges, 

be sure to simplify the form 
as much as possible. Lose any 
extraneous points to keep the curve 
smooth; irregularities are often not 
found until the object is blown up. 


to create patterns. Use 
a simple shape as a starting point, 
and try different target positions to 
make interesting background images 
for your illustrations. Look at unusual 
sources, like textiles, for inspiration. 


When choosing colours, think 

about the context 

that your illustration will 
be seen in. Magazines, books and 
interiors will often feature existing 
colour schemes that you can use 
to complement your own palette, 
leading to an overall feeling of 
harmony or contrast. 


When looking for inspiration, 

cast the net far and wide. 

Collect as much printed 
ephemera as catches your eye, 
make Google your home page, 
and don't be afraid to 
re-contextualise Clip art at every 
opportunity. This is research that 
has been done for you, and can 
save you heaps of valuable time. 


When you need to trace 

pictures or material that 

you've scanned in, try to 
do it manually. The quality of line 
and curve will be much greater and 
more controllable, although the 
process can be time-consuming. 
Try tracing shapes using only 
diagonal and perpendicular strokes 
to create different angular effects. 


Get to grips with the 
9 Find-and-Replace features to 


speed up global colour 
changes. This function can be really 
useful when you're playing around 
with colour schemes, or fine-tuning 
an illustration at the later stages. 


Create different hatching 
1 patterns and apply them 

to areas of your 
illustration where half-tones are 


required. Alternating linear patterns 
with solid fills can add interesting 
optical effects, especially where 
complementary colours are used. 


basic tool of choice for pixels. It 

guarantees you 100 per cent 
control over every single pixel in 
your picture. Also, be sure to use 
Photoshop's Copy and Paste 
features to speed up work. 


1 Photoshop's Pen tool is the 


Make sure your selection and 
2 painting tools are ready for 

absolutely sharp pixels. 
Disable Anti-aliasing, and set the 


Tolerance or Feather to Zero. 


project. For print 

work, you should use clean 
CMYK colours ; for the Web, it’s best 
to stick to Web-safe RGB colours. 


3 Take the right palette for each 


In Photoshop, open two 

windows (Window> 

Documents>New Window). 
Use one for close-up, so you can 
work more easily on the details, and 
the other at 100 per cent, so you can 
see what kind of effect your changes 
are having across the whole piece. 


For printing, you should use a 
Le) much higher resolution: 
300dpi is usually okay. 
After finishing your picture at low 
resolution, scale it, then resample 
with Nearest Neighbour so the 
pixels won't blur. And remember 
to resample it by a clean factor. If you 
have 72dpi as a starting point, you 
could scale it by a factor of four. You'll 
get a resolution 288dpi. Alternatively, 
scale it by five and you'll get 360dpi. 


Be sure to make the most 
6 of Photoshop's layers 

features. This way, you'll be 
able to move objects around at will. 
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PIXEL ART TECHNIQUES 


EBOY 


) Godfather of pixel art, eBoy, is headed up by Steffen Sauerteig, Svend 


‘© Smital, Kai Vermehr and Peter Stemmler. With offices in Berlin and New 

7 York, its pixel illustrations have attracted clients such as MTV, Adidas and 
Wired magazine. Eboy’s love of the pixel comes from the precise control of what 
is on screen, and aside from corporate work, its site is full of freestyle illustrations. 
This immense amount of work has led to the book HELLO, published by Lawrence 
King, and the team has plenty of advice to share with budding designers. mrowww.eboy.com 


ase ara 
LILO TOON, 


If you want to learn more Take your time when 

7 about techniques and 6S composing your image - there 
composition, just zoom are a lot of elements 

in on pictures you really like and to a good pixel illustration. And 

try to work out how the authors pixels just take time. Remember, 

achieved the finished illustration. you're composing your picture out 

of the smallest possible parts of the 

screen, and save time by recycling 

your existing objects in new ways. 


If you use orthogonal 
1 0 views, you'll be able 
to relocate objects all 


over the image, whenever you want. 
If you use the Perspective view, you 
probably won't be able to do this. 


Try to avoid clumsy black 
8 outlines. A lot of pixel 

illustrators don’t appreciate 
this. Look at other people's work 


to see how good outlines actually 
avoid cluttering pixels. 
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Illustration 


significant as any other 

decision you make in giving 
polish to your illustrations. After 
all, it'll dictate how the illustration 
is perceived. Your approach doesn’t 
need to be strictly logical, but when 
you're stuck as to where to place 
what, it helps to sit back and break 
down exactly what it is that you're 
trying to achieve. My first concern 
is usually how | might successfully 
convey a particular mood. 


1 The composition is as 


Consider what will be the 
2 most important way to give 

your image emphasis. It helps 
to think about the elements of 
design. The chief goal is to get your 
idea across, while avoiding cluttering 
the image with things that won't 
contribute to a tight execution. If 
an element's unnecessary, cut it out. 


N 


How will you guide the 
7 viewer's eye around the image 

from one element to the next? 
Once you've decided which portions 
of the illustration will be the most 
relevant, consider the level of detail 
and how to use it effectively. If the 
illustration is suffocating from too 
much visual clutter, | streamline my 
ideas until I'm down to the bare 
bones, and then rebuild to give 
particular areas more significance 
than others. 


Negative space is always 
8 as important as the positive 

space; it can be used to 
give depth to other compositional 
elements. Like colour, it will divide 
the foreground and background. 
It can also be used create chaos, 
or make the illustration sing. 


STRUCTURE AND COMPOSITION 
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Colour gives body to ideas. 
3 You can use it to give the 

image conviction and to 
grab people’s attention. Sometimes 
it's useful for me to look at the 
illustration in black and white, so 
that | can clearly see the contrast 
and the nuances. You can squeeze 
the most out of your use of colour 
by considering not only the hue of 
your choice, but also its value and 
saturation, and then use them to give 
your work a certain pitch and tone. 


Mass generates weight. 

Colour and negative 

space have their own 
mass, as does line weight. Consider 
how you'd like the ingredients of 
your ideas to sit, and what should 
flow where. You can also use line 
weight to transform something 
of importance into a ‘punctuation 
mark’, and thus easily make it the 
focus of your image. 


AUTUMN WHITEHURST 


™ New York-based artist Autumn Whitehurst describes herself as a 
metaphorical thinker, favouring communicative art to abstract pieces. 

~ Her imagery is well known for its muted colours, areas of detail and rich 
textures. Composition is of utmost importance to a successful illustration, 

as Whitehurst explains by sharing her techniques. mo attpick.com/members.php?id=11198 


Every decision you make will 
5 contribute to the 
overall balance in the 
illustration. There is symmetrical 
and asymmetrical balance. Working 
asymmetrically is more challenging, 
but lends you more freedom. Balance 
won't necessarily sedate your work, 
but does ensure a more satisfying 
finish. It also helps if you think about 
the proportions of elements. 


If you're in search of tension 
f) and movement, consider the 

way you juxtapose the various 
Parts in your image. Portions can 
become hunted elements or, by 
placing things suggestively, you can 
make them glide across the page or 
dribble down to the bottom. It’s 
useful to move elements around in 
their initial stages to get an idea of 
how each piece relates to another, 
then get up and walk away from it, 
before returning with fresh eyes. 


Consider using the ’X’ - 
Q a traditional but effective 
method for seeing clearly how 
the components of your image relate 
to one another. Look at 
what you've done when it’s nearly 
complete, and connect all elements 
with Xs of various sizes to help you 
see your work more objectively. 


If your intentions are 
other than being 
excessive, it saves time 


to be economical in your approach, 
and to not overwhelm yoursel. I’ve 
found that instinctive hunches are 
usually the freshest, and then I push 
and pull a little, here and there. Use 
your program's capabilities to keep 
things loose and malleable. Utilise 
layers, masks, effects, filters, and 
more, so that if you change direction 
in your image, it's easy to undo. 


Video Collection 3! 


Tools for the 


Putting your ideas into motion New Work 


It’s the biggest blockbuster of the year 


and the hottest software in town. 


Video Collection 


The Adobe’ Video Collection delivers a comprehensive toolset for Windows’ ei Standard 
based video production - Adobe’ Premiere’ Pro, After Effects*, Encore» DVD 

and the newcomer to the range Adobe® Audition”, our audio tool - providing 

the power and control you need to put your ideas in motion for film, video, 


DVD, or the Web. Available in both Standard and Professional editions. 


> 
After Effects’ 
Audition 
Encore DVD 


Adobe, the Adobe logo, Adobe Video Collection Standard, Adobe Premiere* Pro, Adobe After Effects* 6.0, Adobe Encore DVD, Adobe Audition and Tools for the New Work are either registered trademarks or trade-marks of Adobe Systems Incorporated 
in the United States and/or other countries. © 2003 Adobe Systems Incorporated. All rights reserved. 
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VIX CITY 
LIMITS 


Using the current tools 

in FreeHand, along with the 
new and improved features 
of FreeHand MX, we show 
you how to construct your 
very own world 


With the latest version of FreeHand, we're given a 
host of new and improved tools. In the next five 
pages, we'll give you the lowdown on these tools 
and show you how this illustration (left) was 
created. Start with our interface and new feature 
guide on the next page, then follow Identikal’s 
tutorial on how to build and create your own little 
world of FreeHand vector magic. 

Using the 45-degree angle rule, you'll learn 
how to add those final touches of quality to 
perfect your own FreeHand illustrations; how to 
construct a technical-looking illustration using 
layers and colour co-ordination as simply as 
possible; how to plan and build your own unique 
city using the ‘graphic blocks’ you have put 
together; and finally, how to add definition and 
simplicity to your image as a whole. 

The tutorial will also help you understand more 
about the simple rules of illustration: composition, 
colour and technique. Without these rules, your 
image will lose its character and fluidity. Once 
you've mastered all of these processes, you'll 
then be able to apply them to any of your 
illustrations to help develop your own unique 
styles and worlds. Best of luck! 


INFO Artwork and tutorial by Identikal, info@identikal.com 


~The FreeHand 
>) \ demo is on your 
: ' coverdisc. 
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ESSENTIAL TOOLS 


Your guide to FreeHand MX toolbox shortcuts 
(key commands are in square brackets) 


» r ae 


a 


¥ 


Line — [N] 


ES) 


Output Area - [J] 


FREEHAND MX INTERFACE 


FreeHand MX brings Macromedia’s product in line with the rest of its MX 
products. The interface has significantly changed since version 10, so we 
thought we'd give you a quick reference guide to the tools — old and new 


OBJECT PANEL 


The Object Panel has been seriously 
revamped in FreeHand MX, and now 
enables you to edit your objects’ attributes 
in a hierarchical fashion. 


Subselect -[A] Page -[D] Lasso —[L] 


A "a be | | 


Le 4 


¥ 
Ellipse - [0] Rectangle — [R] 


¥ 


Pencil - [Y] 
d 
i 
Pen - [P] 


= 


The Object Panel is now context-sensitive, which means 
it changes to display different options when different 
tools or object types are selected. Most of the time, 
the Object Panel looks like it does here. The three icons 
enable you to add (in order from left to right) strokes, 
fills and effects to your object. 

You can add as many strokes, fills and effects as you 
like until you get the desired effect. Live Effects enable 
you to add all manner of vector and bitmap-like effects 
to your object, while the Object Panel enables you to 
alter the order in which the effects are applied. You can 


Points: 47 


3 Even/odd fill 
Closed 


Flatness: (9 


¥ 


Bezigon - [B] 


ny 


apply effects to strokes or fills. 


Freeform -[F] Knife -[K] 


Pan - [H] Zoom -[Z] 


oe  3=NEWAND 
ENHANCED 
TOOLS EXPLAINED 


Output Area 

The Output Area tool is a nifty addition to 
FreeHand that enables you to quickly output 
only certain areas of your document. To use 
the tool, simply drag a selection marquee 
around the area you wish to output and then 
print as normal. 


i "| -— 2 Vector-based Eraser 

Xe @ Working much like an eraser in a raster-based 
application, the new Vector-based Eraser tool 
in FreeHand MX enables you to quickly delete 
parts of an object or a path. 


Extrude 

From an illustrator’s perspective, the Extrude 
tool is one of the most exciting additions to 
FreeHand MX. Found in the main toolbox, 

it enables you to quickly and interactively 
extrude 2D objects and rotate them in 3D 
space. After your extruded object is in place, 
° switch to the Object panel to alter the shading 
and lighting or add a bevel. 


7 $2 Blend tool 

The Blend tool in FreeHand has been tweaked 
and moved from the Xtra Operations panel to 
the main toolbox. This now enables you to 
simply click on two objects to create a blend — 
the Object Panel enabling you to adjust the 
blend accordingly. 


Connector 

The Connector line tool is a great addition. To 
use it, simply click on an object you wish to 
link to another and drag the connector line 
that appears. As you move one of the objects, 
the connector line moves with it. Easy! 


Action tool 

The Action tool is another great feature — 
enabling you to link multipage FreeHand 
documents to form Flash-based presentations. 
The tool has a few options, enabling you to 
link to, print or load the target page as a 
movie. Double-click to select the action you 
want, click on an object with the Action tool, 
then drag it to the page you wish to link it to. 


THE MX INTERFACE 
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Tools 

Contains all the main tools for 
creating and editing vector-based 
objects and paths. You can also 
determine the stroke and fill, as 
well as control snap settings and 
move around and zoom into your 
document. (Check out new and 
enhanced tools with the help of 
our annotated diagram, left.) 


Xtra Tools toolbar 

This contains various tools 
for adding effects and creating 
unconventional vector objects. You 
can easily roughen the edges of an 
object, create a bar chart, mirror 
objects and more. 


Xtra Operations toolbar 
The Xtra Operations toolbar 
contains what you may know as 


Pathfinder tools. These enable you 
to quickly combine together more 
than one object to form a new one. 
In addition, other tools are available 
that enable you to simplify paths 
and expand strokes. 


Envelope toolbar 

The Envelope toolbar enables 
you to control an object's shape by 
means of another - or an envelope. 
Use this combined with the 
Envelope option found in the 
Modify menu. 


Perspective Grid 

Used in combination with 
the Perspective tool in the main 
toolbox and the cursor keys, the 
Perspective Grid helps you create 
realistic perspective effects within 
your illustrations. 


Answers 

Introduced across the MX range 
of products, Answers provides 
access to up-to-date info, tutorials 
and other advice from Macromedia. 


Properties 

Contains both the Object and 
Documents panels. The former 
enables you to quickly alter the 
appearance of your objects; 
the latter gives you options to 
change the size, resolution and 
dimensions of your document. 


Mixers and Tints 

Use this panel to create and 
apply various colours to your vector 
object and text. 


Layers 

Manage your document 
with ease using FreeHand’s now 
familiar Layers panel. 


10 thes 
The Assets panel contains 


a list of user-created swatches and 
styles (created from the Object 
panel), and a library containing 

all of your FreeHand symbols. 
Symbols can be edited by double- 
clicking on the relevant symbol in 
the Library panel. 
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& Illustration 


PART 1 PLAN > INSIGHT 
YOUR CITY 


In this section, we show you howto 
get the primary elements right before 
you go on to produce your image / 


Qo 
otf " 


Make your first layer, which should be 


Using a sketch pad, roughly illustrate the shape underneath both the guides and the foreground. 
of your city. Include roads, streets and buildings, _— Now you can import your scans into this layer and 
all within your given dimensions. lock it. 
oa 
Put together a hierarchy of what objects and | 
buildings you wish to establish as your focal ps eo — ——— 
points, then highlight them on your sketch. These | Scan all of your objects into Photoshop, then 
focal points will be useful later on in the tutorial. save them as 72dpi JPEGs. You'll need these 
scans to accurately draw your objects when 
importing them as JPEGs into FreeHand. n 


Set up guides around each object. You'll need 

these guides to lock up to once you begin 
drawing them accurately. Produce your second layer: 
Objects. Make sure it’s above the scans layer. Select a 
bright colour to use for your outlines — this will help 
you differentiate between guide and JPEG more 
easily. 


© 
ry) \ GY 


Once you 've worked out your hierarchy, you 


will now need to decide what to include in the Open up a new file in FreeHand MX. Change 
illustration. Using a mock 45-degree angle look, the active area (if needed) to your desired size 
an isometric vantage, draw rough sketches of by selecting the custom dimensions in the 
the elements you wish to include. These can be Properties>Document window. Remember to 
anything — skyscrapers, cars or even factories. save your file with an appropriate name. 
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One by one, you'll need to trace around each of 


the objects you've scanned in. The best way to 
do this, however, is to imagine that each side of the 
object is flat. Draw what you feel this will appear like 
using either the Geometric Shapes tool, or by 
pressing Shift when using your mouse. 


also the top, you'll need to make them into 45- 
degree angle objects. Start by getting the left side of 
your object and use the Skew tool in the Transform 
window. Set the Transform angle to -45 degrees 
(Vertical). Do the same for the right-hand side of your 
object, but make the skew angle 45 degrees. 


For the top of your object, all you need to do 
1 is rotate the shape 45 degrees (do not Skew). 
Using your guides around the sketch, place the new 
shapes in place around it - these should snap to the 
guides. Notice how the two sides are now larger than 
those you originally illustrated. You'll need to correct 
this by using the sketch as a guide. 


uy 


1 Once you're happy that your object is right, 

you should duplicate it. This will be used to 
bring out the 45-degree angles of the object. With 
the original version, make the three objects a 
completed shape, as this will hold the colour of 
the object and also the thick outline. 


1 By using your duplicated objects, place these 
above the completed shape and turn the 
thickness of the lines to a light weight. With the 


shape completed, now turn the background to a 
colour so that you can begin (without an outline). 
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1 Duplicate the completed shape with no 

background. Have a thicker outline than the 
other shapes. Bring this shape to the front of the 
object to complete your design. 


> INSIGHT 


1 4 Once you've completed your object, repeat 
the process with all the other scanned objects 
until you've finished the whole set. 


1 Now delete the scans layer and replace it with 

a flat colour layer; this will be used for the 
back of your illustration. You now have all the 
elements you need to begin building your own 
unique city. 


PART 2 SIM CITY: 
FREEHAND STYLE 


You have your elements — time to 
use them. We show you how to get 
the best results, fast 1 


1 6 Before you begin, decide on a colour palette. 

Think back to your hierarchy and how you 
want particular objects to stand out. Try and restrict 
your palette to three or four different colours. 
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7 Begin your virtual urban sprawl by using your 
1 background layer; use the colour you wish to 
see as the primary one. Lock this layer and then 
produce the first city layer. 


1 In your new city layer, using your original 

plan, draw out all of the streets and 
pedestrian zones. This is where you'll place your 
vehicles and objects later on. Turn the colour of these 
zones into a tint of the background colour. Now lock 
this layer. 


\ y, S 


1 Now turn the background colours of the 
objects you designed in the first stage into 
tints of the background colour. Make sure you have 
the same colour lines as the streets and roads on the 
first city layer, so that all the elements gel together. 
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0 Make a new layer - this will be the 
background of the city. Now start duplicating 
your desired objects and placing them where you 
wish them to be. Remember to start from the top left- 
hand corner of the image, and then work away from 


2 1 By flipping objects using the Mirror Transform 

tool, you can make them work harder for you. 
Avehicle looking down to the left can easily be 
moved to look down to the right, for instance. 


When putting together the roads of your city, 
try and tone them, or colour them differently 
in order to disguise the repetitiveness. 


2 For your focal points, make another layer and 
place the objects in it. This helps solve a lot of 
problems you'll come across later on in the tutorial. 


o 


2 4 Make another layer. This will be the final layer 
for all of the top part of your city — work 
exactly the way you have in the previous steps. 


PART 3 FINE-TUNE 
YOUR CITY 


Now you have the layout of your 
city, you'll need to add colour and 
depth to your focal points 1 


A,* 


Za 


2 Once you're happy with the shape of your 

city, you now need to pick out some focal 
points to weigh out the image. Here we've picked 
out the buses by colouring them red. 


2 With your main focal point, change the colour 
to something that reflects the background 
colour, so that it stands out. Change the colour of the 
outlines to one that’s darker than the main city —- this 

should lift the skyscraper in the composition. 


2 Try adding an effect to your building, using 

the same process you learned in the first 
stage — think about how you can add extra detail to 
your city. Here we've opened up the side of the 
skyscraper to reveal what's inside. 


2 To bring out the effect, add machines and 
people to this space, making it look busy and 

detailed. You can also duplicate, as you did before 

with the other building, to bring out the open area. 


2 By sticking a circle over the scene, you can 

then use Magnifying Effect>Object>Fill> 
Lens>Magnify. You can play around with how large 
you want the area to be seen. Here we've set the 
Magnifying tool at a scale of 1.8. 


Ne ner 

To make this area stand out, make the same- 
3 size circle as the magnified area and use the 
Transparency effect. Use a colour that will draw 
attention to the space — we've used red at 25 per cent. 
Finish the effect by thickening the outline of the circle. 


FREEHAND 


3 1 Now add another focal point for balance 
(we've picked the ad board). Here we're using 

the 3D Extrusion tool, exclusive to FreeHand MX. 
Once you've selected the vector shape you wish 

to extrude, pull away with your mouse. This 
automatically shows the depth of the extrusion 

as a linear shape; once you let go, the shape will 
automatically render itself as a 3D-looking object. 


3 Once you've made your logo for the ad board, 

use the Skewing tool to fit the 3D object into 
place. Finalise your piece by adding other elements 
to enhance the space - we've used helicopters. 


FINAL STEP 


G ood illustration in FreeHand MX is a matter of 
combining colour co-ordination with technical 
techniques — and you should have picked up a 

few essential ones over the past 33 steps. Your final 
image should not only look detailed, but have a great 
sense of hierarchy and composition - which is 
exactly what Identikal has achieved here. 


ae 
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FREEHAND 


FreeHand is associated with clean vector 
imagery but it can also be used to create 
rough-edged, distressed, ‘scratchy’ vector 
artwork. Here, we provide you with a few 
tips and techniques for ‘messing it up’ and 
making your images look less digital. The 
key is imperfection... 


acromedia FreeHandis 

a wonderfully versatile 

application, enabling users 

to create slick images with 
super-clean edges and super-flat colours. 
As well as appealing to devotees of 
the pure vector line, the software also 
welcomes a broader audience; those 
that want to develop a rougher, more 
flawed-looking approach. 

Despite the fact that FreeHand 
automatically smoothes off any rough 
edges, it is still possible to create images 
that look and feel like they have been 
through processes that are less than 
perfect. With a little knowledge, the app 
can be persuaded to ‘mix’ things up a little, 
scratching and overlaying so that some 
of the perfection can be stripped away to 
create tougher, edgier images. 

Drawing inspiration from other 
mediums, users can infiltrate the 
FreeHand default (clean and tidy) and start 
to mess it up. For example, the silk-screen 
process, most famously typified by 
Warhol, benefits from a beauty and appeal 
that lies in the fact that the results are often 
imperfect. It is possible to see the build-up 
of layers of ink and the occasional 
mis-registration of screens. 


Here, we offer a few basic tips that will 
give your work that lived-in look. One way 
of making vector lines appear less rigid 
and formal is to use the Roughen tool 
found in the Xtras Toolbar. Depending on 
just how much emphasis you place on this 
tool, at what percentage it is set it at and 
whether a smooth or rough line is picked, 
this can give some great results. 

In an illustration for The Guardian's 
restaurant review in The Guide magazine, 
the chef image below was roughened 
from a vector line drawing. The original 
image (left) had been influenced by 
a graphic representation of a chef 
photographed on the side of a meat truck 
in New York. When using the Roughen 
tool, it pays to keep a copy of your original 
vector drawing on a separate layer. 
Obviously if you are slightly shy of 
drawing ability, then use the Trace tool 
found in the Tools panel to create some 
neat copies of scans from your images. 
The mis-registration that features in so 


much of Warhol's silk screen prints is 
another simple technique you can 
replicate in FreeHand. The process 
involves copying the contents of one layer 


look effective when shifted too but, again, 
use sparingly. This technique can be used 
to suggest movement in the image as well 
as a substandard print job! Below, an 
image for The Financial Times about a golf 
course being built on the grounds of an 
old graveyard demonstrates its usage. 
Simply create the shapes of the clothes 

by tracing over with the Line tool, then 
select Modify>Join to join the points to 
the colour fill, before removing the line 

or making it the same colour as the fill. 
Once done, shift the layer a few nudges 

to one side once again. 


pecan de WITH ALITTLE 
0 lly just utilised h 
printing proceesforpostersand + KNOWLEDGE, 
packaging, silk-screen had a built-in FREEHAND CAN 
‘hum-drum’ and was just another cog in BE PERSUADED TO 


the wheel of commercial advertising. That 
is until Warhol, and later Jamie Reid with 
his design work for the Sex Pistols, both 
got in on the act. Reid’s ragged cut-and- 
paste approach at the end of the 70s gave 
a raw visual identity to the sounds of punk 
rock. Clean and tidy it was not! Taking on- 
board these inspirations, it is possible to 
create rough and ready vector art, evoking 
the days before digital with just a few 
straightforward techniques. 
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‘MIX’ THINGS UP 
SCRATCHING AND 
OVERLAYING SO 
THAT SOME OF 
THE PERFECTION 
CAN BE STRIPPED 
AWAY TO CREATE 
EDGIER IMAGES 


onto another, placing underneath and 
moving slightly to one side. Be sure to 
experiment with this technique to get the 
correct look and feel; too far one way and 
the effect can look forced and obvious. 
With this technique it’s best to look at 
using a different colour from the original 
image to create a highlighted effect. See 
the illustration at the top-right of this 
page, created for a magazine feature on 
genealogy and family trees — the layer with 
the drawing of the scientist on has been 
repeated and placed under the original. 
The fill contents of particular shapes can 


So there you have it - one or two simple 
but effective ways of making your images 
less flat and more ‘real’ in FreeHand. 


INFO Expertise supplied by Lawrence Zeegen 
www.zeegen.com 


ILLUSTRATOR 


Like Adobe Photoshop, Illustrator also provides 
layers. Here, we show you how to add a mask to a 
layer using Illustrator 10 


THE SECOND OPTION IS TO 
US K.T 


here are two ways to create 
masks in //lustrator 10. The first 
method is to apply a clipping 
mask to a layer. Once you've 
created some artwork on a layer in 
Illustrator, you then need to create an 
object or shape that you’d like to use as 
your clipping mask. Make sure the 
shape you want to use as the mask is 
on top of the other objects. 
Select the objects you want masked 
and also the the object you want to 
use as your mask. Then, from the 
menu, choose Object>Clipping 
Mask>Make. All of the objects on the 


With all of our objects selected, we now select 
Transparency> Make Opacity Mask. This is the result, and 
an icon for the mask itself appears in the Transparency 
palette. The luminosity of the object's fill acts in a similar way 
to Photoshop's channels. 


We've created a large box on top of our other objects, 

which we're going to use as our opacity mask. We 
want to fade the artwork horizontally, from one side to the 
other. The luminosity of this linear gradient fill works 
perfectly to produce the desired result. 
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To move or edit the mask independently of the 
underlying artwork, just click on the link symbol 
between the art thumbnail and the mask thumbnail in 
the Transparency palette, so that you can select and move 
or alter the mask. You can also invert the effects of the 
blend by clicking the Invert Mask checkbox. 


You can release the mask by choosing Release Opacity 

Mask from the Transparency palette menu. This reverts 
the box with the gradient to its original state, before it was 
used as a mask. Alternatively, if you want to quickly disable 
the mask, simply Shift-click on the mask icon to hide it, just 
as you would in Photoshop. 


wal 
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layer will now be masked using the 
top-most object as a clipping mask. 
It's a good idea to lock the mask in the 
Layers palette. That way, individual 
objects will not be accidentally moved 
later with the Direct Selection tool. 

The object which defines the clipping 
mask is entirely editable. Provided that 
your mask is unlocked, you can select it 
using the Layers palette Target button, 
or simply by clicking on it using the 
Direct Selection tool. It can be scaled, 
rotated or edited however you like, and 
you can use the Direct Selection tool to 
edit individual points. Should you 
decide that you no longer want a 
clipping mask on the layer, all you 
have to do is select the object and 
choose Object>Clipping Mask> 
Release from the menu. 

The second option is to use an 
opacity mask. An opacity mask 
uses the change in luminosity of 
overlaying artwork to mask the 
objects lying underneath. Think of 
it as a layer mask or alpha channel 
in Photoshop, where dark areas 
mask out the artwork but light areas 
allow it to show through. 

Like a clipping mask, an opacity 
mask is created from the topmost 
shape in a selected set of objects. 
Again, as with creating a clipping mask, 
you need to select all of the objects that 
make up the artwork as well as the one 
you want to use as your opacity mask. 

Next, choose Make Opacity Mask 
from the Transparency palette menu. 
The results will be evident immediately 
and you'll notice that a thumbnail of 
the mask is created in the transparency 
palette, and that it’s automatically 
linked to the object. 


The large pink star is the top-most object 
in this group of objects on the layer. 
Choosing>Object>Clipping Mask>Make 
will create a mask from the object. 
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Painter 8 “Gy 
{ 


PAINTER 8 


Boasting a brand new interface, 
fantastic new features and 
unparalleled integration with 
Photoshop, Painter 8 now 
reaches out to a wider audience. 
See for yourself with this great, 
in-depth tutorial 


This may be the upgrade that wins Painterthe users 
who've been waiting on the sidelines. Photoshop users 
put off by an unfamiliar workspace and cluttered desktop 
can now revel in the Photoshop-friendly environment 
that is Painter 8. The reworked interface becomes intuitive 
very quickly, so the learning curve for your average 
Photoshop user is refreshingly slight. The improved 
interface enables you to focus less on how to do things 
and more on the artwork itself. 

Apart from the streamlined interface, we explore such 
features as channels and layer masks, which behave 
refreshingly similar to those in Photoshop. We also 
explore the almighty new mixer palette, that enables you 
to blend paint just as you would in the tactile realm —an 
important new feature in making the application more 
and more like natural media. In addition, new brush 
creator tools, such as Randomize and Transpose, help 
you quickly create a number of variations of your current 


q 
brushes with incredible ease. And then there are new i 
features like the tracker, that enables you to keep track of j 
a 


just what brush you used to create that stunning 
effect, and access it again at the click of a button. f 

So, Photoshop users and Painteralumni, let's get és ff" 
painting. You can download a 30-day demo of Painter 8 ; 3 
online at www.corel.com/painter / 


@ a On the disc, you'll 
find the file 
\ © Mes 
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CHANNELS 


We'll start by generating a selection 
from an existing alpha channel within 
the image —just like Photoshop 


Open the file templat.tif from your cover DVD. 

Click on the New Layer button in the Layers palette 
to create a new layer. Expand the Channels palette by 
clicking on the triangle at the bottom of the Layers 
palette, then click on the alphachannel in the palette. 


Click the Load Channel As Selection button 

at the bottom of the palette. Make sure that 
Load From is set to alpha 1 and Replace Selection 
is enabled in the resulting dialog box. Click OK. 
Choose Select>Invert from the menu. Select the 
RGB channel in the Channels palette and hide the 
visibility of the alpha channel. 


Collapse the Channels palette, and select 

your new layer in the Layers palette. Choose 
Select>Hide Marquee from the menu to keep your 
selection active but invisible. Select the Paintbrush 
tool from the toolbox. In the Layers palette, enable 
Pick Up Underlying Colour. 
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GROUPING PALETTES 
Painter's interface has always had a reputation 
for being cluttered. Until this version, it hogged 
the screen, with lots of palettes covering up 
limited workspace. Version 8 remedies this 

old problem by providing the ability to group 
palettes. You can group ones that you use often 
by dragging the title bar from one palette onto 
another. To ungroup them, simply drag a title 
bar outside the palette it’s in. 


BRUSH TRACKER 

One of the biggest problems users had with 
Painter in the past was trying to remember 
exactly how to achieve a certain brush setting 
or stroke. The new Tracker palette helps 
remedy this problem. It records your last 25 
brushes, so you can go back and access them at 
any time. Although it doesn’t record colour or 
size, it's a tool that many experienced Painter 
alumni will find essential. 


MIXING PAINT 


The new Mixer palette provides 

an area for you to mix paint using a 
brush or palette knife, just like you 
would in the real world 4 


In the Brush Selector, choose Acrylics. Select 

opaque brush detail 5 from Brush Variantin 
the Brush Selector. In the Property bar, change 
Brush Size to 10 and the Opacity to 10 per cent. 
Paint over the figure’s face within the hidden 
selection. Sample colours from within the figure 
using the Eyedropper tool (Option). 


Use the same brush and vary the size and opacity 

in the Property bar. Sample colours from within 
the rest of the figure and paint over it within the 
hidden selection on your layer. Choose Oils from the 
Brush category, and thick oil flat 20 from the Brush 
Variant. Reduce the Brush Opacity in the Property bar, 
then paint over the acrylics with oil. 


Paint within the hidden selection using sampled 

colours from the figure. Adjust the size and the 
opacity of the brush as you go wherever necessary. 
Continue painting until you have gone over most of 
the figure. Expand the Mixer palette if it is collapsed 
(it's directly underneath the Colours palette). 


Use the Eyedropper tool to sample one of the 
lighter colours from your figure. In the Mixer 
palette, select the brush and change its size to about 
17 pixels. Paint a blob of colour on the Mixer palette. 
Now select a greenish colour from the Colour palette 
and paint it over the existing colour in the Mixer. 

Continue painting to mix the colours together. 


Choose a light yellow from the Colour palette 

and paint it over an area of your colours in the 
mixer. Select the palette knife in the Mixer palette 
and go over the area where the yellow overlaps the 
other colour. Using the palette knife enables you to 
mix existing colours without having to paint more 
colour into the mixer. 


Select the Eyedropper tool from the Mixer palette 

and sample a colour from the mixer. Use your 
existing paintbrush to paint some of this new colour 
into your hidden selection on the canvas. Use 
variations of your existing brush and various colours 
sampled from the mixer to paint some different 
colours throughout the figure on the canvas. 


1 Select the Pan tool in the Mixer palette. Move 

the mixed paint over so that you have some 
more empty space to mix new colours. Select a dark, 
yellowish-blue from the Colour palette and paint 
some into the Mixer, then select a lighter version of 
that colour and paint it into the Mixer. Use the palette 
knife to blend them with each other and any 
pre-existing colours they touch. 


Use your existing oil brush to paint some of 
1 your new mixed colours over dark areas of your 
figure within the hidden selection. Select the Zoom 
tool in the Mixer palette and click on an area of your 
newly mixed colours to zoom in on it. Click again to 
zoom in even closer. Use the palette knife to mix the 
colours you zoomed in on. 


5! 


1 Use your existing brush with varying size 

and opacity settings to paint some of your 
newly mixed colours onto the figure within the 
hidden selection. Click on the trash can in the Mixer 
palette. The trash can clears the contents of the 
Mixing palette and conveniently resets the Zoom 
level to 100 per cent. Choose Select>Invert from the 
menu to invert the hidden selection. 


BRUSH CREATION 


Explore the new Randomise and 
Transpose features while blending 
the figure into the background 1 


jae 
Choose Window>Show Tracker from the 
1 menu. Scroll down to the bottom of the Tracker 
palette and select the bottom brush (the acrylic one 
we used at the beginning). Use the Eyedropper to 
sample the grey background colour, and paint some 
of this colour into the Mixer. Select some different 
grey-ish colours and tones from the Colour palette. 


Paint these colours in the Mixer and mix it 

1 all together using the brush and palette knife. 
Use the Eyedropper tool in the Mixer palette to 
sample various colours from the Mixer. Using your 
current acrylic brush, with various size and opacity 
settings, begin to paint the entire background using 
colours from the Mixer palette. 


Painter 8 oa 


1 When you have covered the entire background 
with acrylic brush strokes, in the Tracker 
palette, select one of your previously used oil brushes 
(second or third from the bottom). Use the colours 
sampled from the background to paint oil strokes 
over some of your acrylic strokes within the hidden 
selection. Use a variety of sizes and opacity settings. 


16 Choose Select>None from the menu to 
deselect. Select Window>Brush Creator from 
the menu and click on the Randomizer tab. Select a 
variant from the left and try painting with it on the 
scratch pad. Keep trying different variants until you 
find one you like the feel of. When you have selected 
one, click on the Transposer tab. 


Click the Clear button under the scratch pad. 
1 Leave the brush at the top selector bar set 
to oils, but change the brush in the bottom selector 
bar to pastels. Click the Transpose Current Selection 
button to blend the brushes together over a series of 
stages. Again, try the resulting variants on the scratch 
pad to see what's possible. When you find one you 
like, close the Brush Creator window. 


TRANSPOSER 

Another great feature within the Brush Creator is the 
Transposer. This produces variations of your brush by 
combining it with a second brush of your choice. Your 
current brush is displayed at the top of the palette; the 
second brush is near the bottom. You can choose from 
any of Painter's natural media tools and variants for the 
bottom brush. You may also change the top brush as well 
if you like. Clicking on the Transpose button creates six 
brush variations in-between your top and bottom brush. 
Again, you can try any brush on the provided scratch 
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18 Reduce Brush Size to about 8 and increase 
Opacity to about 45 per cent, then create a new 
layer. Use this brush to paint over the sharp edge 
between the figure and the background. Use the 
Eyedropper tool to sample colours from the figure 
and the background, and slowly build up brush 
strokes that cover the hard edge. 


LAYER MASKS 


Finally, layer masks that behave 
exactly the way they do in Photoshop. 
A lot of digital artists are going to love 
this particular feature 


1 Create a new layer. Choose conte from the 

Brush category in the Brush Selector. Choose 
dull conte 8 from the Brush Variant in the Brush 
Selector. In the Property bar, reduce Size to 5 and 
Opacity to 29 per cent. Use the Eyedropper to sample 
colours from the image and draw some sketch detail 
lines over the figure and the background. 


20 Once you're finished sketching, click on the 
Create Layer Mask button at the bottom of the 
Layers palette, then click on the Mask icon. In the 
Colours palette, select black. In the Brush Selector, 
choose charcoal from the Brush category and soft 
charcoal pencil 3 as the Brush Variant. 
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CHANNELS AND 
CAVERN MASKS 


These two new features are so similar to those in 
Photoshop that passing files between the two programs 
feels effortiess. The channels in Painter 8have their own 
palette, very similar to the one in Photoshop, while the layer 
masks are incorporated into the Layers palette just like they 
are in Photoshop. You can also edit the masks and channels 
as you would in Photoshop by painting with greyscale. The 
beauty of this in Painteris that you have all the natural 
media tools at your disposal to use while editing your 
channels and masks. 


RANDOMIZER 


Inside the Brush Creator, the Randomizer is a great new tool 
for generating instant random variations of your current 
brush, Click on the Randomise button and you're treated to 
12 variations in seconds. You can control the degree of 
variation via the slider below the brush previews in the 
palette, as well as test any brush before you exit the Brush 
Creator by painting on the scratch pad to the right. 


2 Change the size to 50 and the opacity to 25 

in the Property bar. With the layer mask active 
in the Layers palette, begin to paint over areas of 
the mask using the soft charcoal brush. Just like 
Photoshop, painting with black on a mask will mask 
out that area of the layer. Now softly paint over areas 
you want to treat in this way. 


oe pes ee reieg 


2 Select white from the Colour palette, and paint 
over any areas in your layer mask that you 
may have masked, and which you'd like to add back 
into the image. Just like Photoshop, painting with 
white on a layer mask reveals that part of the layer. 


2 Feel free to continue to draw and paint on 
various layers within the image until you 
feel that you're finished. When your painting is 
complete, choose File>Save As from the menu. 
Select Photoshop as the format, and make sure 
Save Alpha and Uncompressed are enabled. In the 
Export options, we chose CMYK as the colour space, 
since our destination was print. 


FINAL STEP 


e opened the file in Photoshop and everything 
was absolutely perfect. The colour looked 
great and all of the layers, channels and masks were 
there and working properly. We also added a few 
adjustment layers to snap up the colour (more out 
of habit than necessity). This is an excellent upgrade 
that works seamlessly with Photoshop. 


PAINTER 


Paper grain is one of the unsung features in 
Painter's impressive natural media toolset. 
Often overlooked, its existing paper grain 
features can lend a wonderful sense of the 
tactile to your images. Experiment with it to 
add idiosyncratic flair to your design work. 


USING TEXTURE 


In Painter 7, using a low grain setting of 21 per cent, we 

select a basic paper texture and draw four strokes. Note 
the differences in appearance that’s possible by simply 
scaling the paper grain by 100, 200, 300 and 400 per cent. 
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SHORTCUTS 


ully in keeping with the tactile 

realm, many of Painter's tools offer 

different results when applied to 

surfaces with different paper 
textures. As you'd expect from real world 
natural media, Painter enables you to 
control the paper texture of your canvas to 
achieve stunning results. 

In Painter 7, existing paper textures are 
available in the Art Materials palette by 
clicking on the triangle next to the word 
‘Paper’. In version 8, the papers have their 
own dedicated palette, which you can 
view by selecting Window>Show Papers 
from the menu. 


Again, in Painter 7, we select the Dry Cracks preset. For 

the first stroke, we leave the paper set to default; for the 
second, we increase contrast to 300 per cent; and for the 
third we increase brightness to 80 per cent. Note the effect. 


To create a paper texture in Painter 8, simply select a 

preset pattern from the pulldown menu in the Make 
Paper dialog. Once you've adjusted the spacing and angle, 
you can then name and save the paper texture as a preset. 


In Painter 8, we draw three strokes. We then increase 

the size and contrast of the texture. See the difference 
between the settings in the Grain slider in the Property bar. 
The strokes are set at 5, 10 and 15 per cent. 


In both versions of Painter's Paper 
palette, you'll find three main sliders. The 
first is the Scale slider, which enables you 
to resize the paper grain as small as 25 per 
cent or as large as 400 per cent. Be careful 
about scaling large textures in Painter— it 
can consume valuable RAM and cause 
things to get rather sluggish. The second is 
the Contrast slider, which, as you've 
probably already guessed, enables you to 
adjust the contrast of the paper grain. The 
third slider enables you to adjust the 
overall brightness of the grain. 

You can choose from any of the preset 
papers in the palette as a starting point, or 
you can create your own by choosing 
Make Paper from the palette menu arrow. 
The Make Paper dialog box enables you to 
generate your own paper grain by making 
use of the existing patterns in the Pattern 
pop-up menu. By default, the Basic Paper 
presets are displayed in the Papers palette. 
Itis possible to load other paper presets in 
the Papers palette by choosing Open 
Library from the palette menu arrow in 
version 8, or Load Library from the paper 
pop-up in version 7. Then navigate to your 
additional libraries. 

So how does it work? Well, first, try 
to imagine paper grain as a three- 
dimensional entity, just like it is in real life. 
The whites act as extruded areas, being 
the highest points. The black areas act as 
the recessed points, being the deepest 
areas. All greyscale values fall into place 
in-between. Versions 7 and 8 of Painter 
each offer an Invert function for your paper 
grain in the Papers palette. Version 7 has 
an Invert checkbox, and version 8 has an 
Invert button with a rather obvious 
inversion icon on it. 

And just how does all of this affect 
your painting? Well, for the answer, you 
need to redirect your attention from the 
Papers palette to the Grain slider. The 
Grain slider in version 7 is located in the 
Brush Controls palette. In version 8, it’s 
situated in the Property bar at the top of 
the screen. This powerful slider controls 
how much of the paint from your current 
tool penetrates or soaks into the paper 
texture. A low-grain setting means that 
less paint penetrates the recessed areas 
of the paper, thus showing more of the 
grain. A higher grain setting means that 
more paint penetrates the paper, so less of 
the grain is revealed and your strokes 
appear more solid. 


INFO Expertise supplied by Derek Lea, 
derek@dereklea.com 
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Pixel art 


ILLUSTRATION 


VIARS 
MISSION - 
PIXEL ART 


Pixel art is compact, neat 
and colourful. It’s also very 
time-consuming to create, 
and requires a great amount 
of dedication... 


With its roots planted firmly in the pioneering days 

of videogames, pixel art has also become a valid 
illustration medium. Few modern art forms can claim 
the nostalgic appeal of pixel art, bringing back 
memories of late nights in front of Sega’s MegaDrive 
or Nintendo's Super NES console for a whole 
generation of 20-30 somethings. Now relegated to the 
handheld and mobile phone sector, pixel art has taken 
a back seat over the last few years while its younger, 
quicker and easier (but a lot less attractive) brother, 3D, 
has taken centre stage in in the videogames industry. 

However, with the recent success of illustrators such 
as eBoy, (whose pixel art tips you'll find on page 39) 
going back to the old, dark arts of the pixel, and 
employing lessons learnt by videogame developers 
and isometric engineering draftsmen, pixel art is 
enjoying something of an underground renaissance. 
Its compact and vibrant dynamics are perfect for the 
busy colourful scenes it’s used to create. It’s amazing 
that a few simple squares can be pushed together 
to create such modern masterpieces. 

Pixel illustration conforms to a strict set of laws and 
rules. It’s often the case that when a completed image 
is viewed at 100 per cent, a stray or rogue pixel will 
stand out like a sore thumb. In fact, it’s often said that 
where you don't place a pixel is sometimes more 
important than where you do. In the tutorial that 
follows, Gary Lucken passes on some of his pixel art 
knowledge, laying down the basic rules he followed 
when creating this illustration. Pixel art is hugely 
addictive — practice and perseverance are often the 
key —and if you conquer the steep learning curve, you 
should find that your square-pushing skills increase 
quickly over a short space of time. 


ON THE DVD 
— You'll find all 
© the text and images 
you need to follow 
this tutorial on the 
DVD in the folder 1_pixel_p56. 
All images are for personal 
use and are not to be 
reproduced elsewhere. 
Expertise by Gary Lucken. 
www.armyoftrolls.co.uk 


+ 
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SETTING UP 
YOUR PROGRAM FOR 
SQUARE-PUSHING 


First up, take a moment to configure 
ImageReady (or Photoshop) for 
pixel art... 1 


Open ImageReady and create a new document. 

Select the Pencil tool (shortcut: N) and select the 
smallest brush size. This brush size represents 1 pixel 
-all images you see on your computer screen are 
made up of these single pixels. Get to love these tiny 
square pixels because you'll be seeing a lot of them. 


When creating pixel art, you'll be using a 
zoomed- in view most of the time. However, 
it’s also helpful to be able to see what your image 
looks like at 100 per cent. To do this, select your 
new document and go to View>New View. This 
will create another view of your already open 
document. Place it to the side of the main document, 
and whatever you do now in the zoomed-in view 
will be shown in the 100 per cent view too. 


If you use any of ImageReadys Marquee tools 

to draw shapes, make sure you turn off the 
anti-aliasing function. Anti-aliasing is a big no-no 
when doing pixel art, although hand anti-aliasing 
is used in certain styles of sprite work. 
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EASY TO UNDO 

“I tend to use Adobe ImageReady for all my 
pixel art,” says Lucken. “Having used 
Photoshop for years, I'm used to ImageReadys 
tools and interface. Since it’s basically 
Photoshop for low-res images, it's ideal for pixel 
art, plus it offers many more undos, without the 
hassle of Photoshop's History palette. 
Remember, all pixel art should be created at a 
screen resolution of 72dpi.” 


IMAGEREADY 


ALTERNATIVES 

You're by no means restricted 

to ImageReady. Paint Shop Pro, Graphics 
Gale or even good old MSPaintare all capable 
pixel art applications, but only Photoshop 
and PSP offer layers, which help when 
creating large illustrations. 


It's also helpful to create a palette of colours 

as you work. As you use a new colour, place a 
small square of this chosen hue in the top left-hand 
side of your document. This is an easy way to keep 
track of the colours you're using — a quick click of 
the Eyedropper tool and you'll be back working 
with your chosen colour. 


Zoom in on your pixel art, so that you can 

concentrate on the close-up details. Remember 
that you also have the 100 per cent view to one side, 
so you can always see if your art's looking how you 
want it to. If things don’t look quite right, it might be 
because you're trying to use too many pixels and 
being overly detailed in too small an area. Pixel art is 
not like conventional art, because you’re restricted to 
a limited number of squares with which to create 
your images. It’s sometimes just as important where 
you don't place a pixel as where you do. 


If you feel the need for a guide to follow when 

creating your artwork, it's possible to pixel over 
scanned artwork. Scan in your art at 72dpi, trying to 
draw the original as close in size to the final piece as 
you can. This way you'll lose less detail when reducing 
the image to a suitable pixel art size. Most videogame 
sprites are created in multiples of eight, so sizes of 
8x8, 16x16, 32x32 and 64x64 are commonplace in 
pixel art. Of course, when producing a magazine 
illustration, you're put under no such restrictions. 


: 2 THE 
MATHEMATICS 
AND RULES 


In this section we discuss the angles 
used in isometric pixel art and the 
various approaches to drawing simple 
shapes and colouring techniques... / 


Having its basis in engineering technical drawing, 
the isometric view represents objects from a 
perspective-less viewpoint. Objects are based on 
a diamond shaped grid, as shown above. 


Te 
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A traditional isometric view is based on an 
angle of 30 degrees. However, 30 degrees 
gives a messy and uneven line when displayed 
on acomputer screen. Pixel art uses an angle 
of roughly 25.565 degrees. Don’t worry about 
the sudden appearance of mathematics, because 
you don't really need to concern yourself with 
all these numbers. 


When drawing a line at 25.565 degrees, all 

you need to remember is ‘1 up, 2 across’ — this 
creates a step-like effect when zoomed in. The lines 
above were created by placing two pixels, then 
moving one pixel up and placing another two at 
the end of the previous ones. 


TYRE 2 


There are two ways to approach isometric 

graphics. First, there's the three-pixel corner 
(as shown here). This method uses three pixels 
in the forward corners, and creates a slightly 
neater box than the second method. 


TYRE 2 


The second method doesn't use three pixels 
in each forward corner. Instead, it uses the 
1 up, 2 across method in the entire construction. 
This method gives a slightly less appealing shape, 
and doesn't lend itself to highlighted edges as 
well as the first method. However, it does have 
its own advantages. 


If you wish to tile two three-pixel corner boxes 

to make a larger image, you'll get ugly jagged 
edges. Jaggies are often talked about in pixel art 
when referring to an ugly step to the pixeled line. 


Therefore, the method described in Step 5 
is recommended if you wish to place boxes 
next to each other. This second method makes a 


much neater line (without jaggies) when tiling boxes. 


Boxes are easily created using the methods 

we've discussed, but you can build them in other 
ways too. The easiest way to draw a box is to create 
the upper face, then duplicate the layer in Photoshop 
by choosing Duplicate Layers in the Layers palette. 
Move the new layer downwards then join up the 
edges using vertical lines. 


> 


Here are some examples of triangles. Notice 

how one of them uses the 1 up, 2 across 
method in its entirety. The others use both this 
and lines of single pixels, which gives less steep 
aslope to the triangles’ sides. 


1 0 Circles are probably the trickiest shape to 
tackle from an ISO viewpoint. A front-on 

ball shape is easily created using the Marquee tool, 

but an upright tube shape is a lot harder. With a little 

patience and a keen eye, this can also be created 

using the Marquee tool. 


1 1 Here are a few other basic shapes that can 
be easily created using an isometric viewpoint. 
You are restricted only by your imagination. 


A lot of comic-style pixel art uses black 
1 outlines. Let's create a light-sourced cube 
as described above. We start with a cube created 
using a solid black outline. 


— 
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PART 2 THE 
MATHEMATICS 
AND RULES OF 
ISOMETRIC PIXEL 
ART CONTINUED... 


Choose a light source from the top left 
1 pointing downwards onto the cube. Then 
paint the left-hand face blue. Choose a lighter 
blue for the top, where the light is strongest; 
and a darker blue for the right-hand face, which 
receives the least amount of light. 


1 The cube is now looking more like a 3D cube, 
but there are still a few things you can do to 
make it look even cooler. Because you don’t need 
a black outline on every edge, you can highlight the 
forward edges (those contained within the shape) 
to give a very nice effect. Choose a shade even 
lighter than the top face, and colour the lines that 
make the inside edges of the cube. 


1 As anice finishing touch, choose a pure white 
colour and put a few pixels on the front-facing 
corner - this gives a shiny effect to the shape. 
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PART 3 BUILDING AN 
ISOMETRIC HOUSE 


Use the skills you've learnt in 
Parts 1 and 2 to draw an isometric 
building. I've chosen to create a 
videogame store called Marsh's 
Loft, but you can draw whatever 
kind of building you like... 


Start by drawing a basic box outline. Doing 
this will help you to get the correct scale for 
your building. 


Because a basic cube shape would make a 

very boring- looking construction, I've added 
amore interesting top section. This roof section 
is made from three thin square chunks laid out 
on top of each other and then joined at the edges. 


Now you've got the basic shape of a house, 
you can fill the image with your chosen colour. 


To make things even more interesting, you could 
add an indentation to the top of the building. 
This creates a roof terrace and is a nice simple touch. 


Using the top-left light source we outlined 

earlier, choose three variations of your colour: a 
base colour, a lighter colour and a darker colour. 
Using these three hues, you can fill each side, 
depending on how the light hits the building. 


HIGHLIGHT 


Now add some highlights to the edges. 

Highlighting the inner edges of the building 
gives a cool effect. The black edges can be very 
overpowering, but adding these highlights really 
helps to round off the building. Notice also that 
I've replaced some of the black edges with a 
darker shade of blue. 


Give your building a window so the 

customers can see in. For this you can use a 
method called sculpting. Draw a rectangle where 
you want the window to sit and then make a 
selection inside this shape using the Marquee 
tool. Then delete the selection. 


Now draw a smaller rectangle inside the deleted 

selection — this gives you a nice window ledge. 
Fill the shape with a suitable window colour. You 
can add a few highlights here, if you like. 


Use a similar technique to create a door next 
to the window. 


1 Choose a typeface and type a character — 

I've chosen a ‘3’. Make sure the anti-alias 
option is turned off. There are many free bitmap 
typefaces available for download on the Internet, 
and getting a small library of bitmap fonts really 
helps when using type in pixel art. 


= 


1 1 From the Photoshop menu bar select 

Edit>Free Transform>Skew and skew your 
character to an isometric angle. You can do this 
by eye or by using the 25.565 degree angle. 


1 Now use the Marquee tool to select the 

character, then on a new layer choose 
Edit>Stroke and make sure the size is set to one 
pixel and the location is set to centre. This will 
give you an outline of your character. 


1 3 Now duplicate the layer and move it back 

to create the two sides of your isometric 
character. Join up each edge using the 2 up, 1 
across method. 


2B 


Now colour-fill each side and clean up 
any pixels that shouldn't show through 
- isometric character. 


1 Once again, using the top-left light source, 

choose a darker and lighter shade of your 
original colour and fill the corresponding sides 
using these colours. 


=" 
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PART 3 BUILDING AN PART 4 THE 
ISOMETRIC HOUSE SCULPTING METHOD 
CONTINUED... Sometimes it’s helpful to make more 


complicated shapes from larger 
shapes using the sculpting method... 


Use the Marquee tool (remember to turn off any 

feathering or anti-aliasing) to make a selection of 
the inside of the shapes you made with the 
contrasting colour. Then hit Delete to remove them. 


Now you've got the basic shape of a house, 
you can fill the image with your chosen colour. 


Now fill in the legs with the correct shade. The 
forward-facing side of the left-hand leg should 


be filled with the darkest hue, while the other side 

is filled with the middle of our three chosen colours. 
Go over the remaining outline covering the red in 
black, but leave the highlights on the legs. 


1 Now highlight the edges using an even lighter 
shade of your chosen colour and add some 

pure white pixels to each edge. As we discussed 

in the previous section, this is by no means 

necessary, but it does give a nice shiny edge effect. 


Using a contrasting colour (I've chosen red), 


1 Now you've learned how to make mark out the legs of your table. Don’t worry 
isometric type, you can create a sign using about the legs looking flat because we'll add the 
this technique. I’ve created my Marsh’s Loft sign 3D aspect later on. 


and put it on top of the right-hand edge of my 
building. Follow steps 10-16 to create all the 
letters needed for your own shop sign. 


The table is now almost finished. You've 
outlined it in black and colour-filled any 
non-coloured sections. The only thing left to do 
is to highlight the legs with your highlight colours. 


Use the Marquee tool (remember to turn off any 

feathering or anti-aliasing) to make a selection 
of the inside of the shapes you made with the 
contrasting colour. Then hit Delete to remove them. 


1 Add a few finishing touches with some 
highlights to the glass, and some stickers 
and signs above the door and on the windows. 


62|Creative Collection 2003 


PART 5 PIXELING 
THE ALIEN 


This section explains how to create 
one of the alien characters in the 
finished Space Station image... / 


After doing a quick pencil sketch as close to 

the original size as possible, scan the image in 
at a screen resolution of 72dpi. All pixel art is done 
at this resolution. If your image is still too big, scale 
it down in Photoshop. 


Increase the contrast of the scan to make the 

outline easier to follow. To do this, choose 
Image>Adjust>Brightness-Contrast and increase 
the contrast using the slider until you can make 
out the lines of your scan more easily. 


The easiest way to pixel over your sketch is to 

use layers. In Photoshop’s Layers palette, add 
anew layer by clicking on the drop-down menu 
and choosing New Layer. 


If your original scan is very dark, it’s sometimes 

hard to follow, especially if you're pixeling over 
the top using a similar dark colour. It can be helpful 
to knock back the opacity to 50 per cent - this way 
you can still see the original image and easily drop 
pixels over the top of the image. 


Now you can start to outline over the original 
scan. Follow your artwork, pixel by pixel. 
Don't worry about making it a perfect reproduction 
of your original, because you can always go back 
and clean up parts later. 


Using the scan, you can now produce a line 
art version of your character by following the 
lines, pixel by pixel. Alternatively, use your scan 
as a base, and re-create it using a combination 
of the Pen tool and the Marquee tool. “The second 
method can sometimes help to create a more 
symmetrical cartoon-like image and is what I've 
used to create this character,” says Lucken. 


You can now start to colour the sprite. Using 
the Fill tool, choose your colours and fill each 
section of the character. Remember to create a 
palette next to your image as explained in Step 5 
of Part 1 of this tutorial. 


Using a darker hue of each of your chosen 

colours, you can now start to shade the 
character. Think about how the light would hit 
your sprite were it a rounded 3D object, and 
shade it accordingly. 


Once you've shaded the dark shadows, add a 

few highlights. Choose a lighter colour of the 
middle hue, and pick out the section where the 
light hits. The most obvious place is the top of the 
head. You can see in the image above how to 
highlight the light hitting this area. 


=> 
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PART 5 PIXELING 
THE ALIEN 
CONTINUED... 


1 Since the black outline is quite oppressive, 

it’s a good idea to eliminate all the black from 
inside the main outline. Choose an even darker 
shade than the shadow hue, and go over the black 
outline that falls inside the main outline. 


1 You can also use this method on the outside 
main outline. But this time, bear in mind 
where the light hits. Go over the black with a 
slightly darker shade of your main colour, then 
choose an even darker hue for where the shadows 
hit. This method is sometimes called SELOUT 
(selective outlining) and is used to a greater 
extent in many commercial game sprites. 


1 The character is now essentially finished. 

However, depending on what kind of 
background it's going to be placed on, a black 
outline can be quite effective. Make a selection 
with the Marquee tool, and choose Edit>Stroke. 
Make sure the width is set to one and the location 
is set to centre — this gives you a black outline. 
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1 Another colouring technique used in sprites 


that are restricted in colour choice is 


‘dithering’. I've gone really over the top with the 

dithering in this image, but it helps to explain the 
technique. Taking a slightly darker hue and creating a 
checkerboard effect gives the impression of three 
colours being used when there are actually only two. 
This is especially effective in greyscale sprites. 


1 4 Give your character a simple shadow using 
the Marquee tool. Just make a selection on a 

layer underneath your character and fill in a darker 

colour than the background it'll be standing on. 


1 5 The character is now essentially finished. 
However, depending on what kind of 


background it's going to be placed on, a black outline 


can be quite effective. Make a selection with the 


Marquee tool, and choose Edit>Stroke. Make sure the 
width is set to one and the location is set to centre — 


this gives you a black outline. 


PART 6 ADDING 
TEXTURE 

Spice things up a bit by adding 
textures to your image... 


When | first pixeled the robot in my illustration, | 

thought he looked a bit bland. Something 
seemed to be lacking — the flat colours just didn’t give 
him that metal-man feel | was after. 


| took a darker colour and started to pixel square 

panels around the robot's head. | also dotted a 
few rivets and bolts here and there. This in itself gives 
the robots a more metallic look, like he’s bolted 
together from sheets of coloured metal. 


It's still lacking something. To beef it up, take a 

highlight colour and pixel another line inside the 
darker pixels we laid before. Make sure you follow the 
same lines all over the robot. This really helps to 
make the panels look more bevelled, and some 
highlights around the rivets and bolts give a really 
cool effect. 


e 


na? 


| 
| 


he real beauty of using Layer 
Styles can be appreciated when 
you start to combine several styles 


t ther t it ffect. Ti 
Layer Effects and Styles are often neglected eee 


simple experiment by drawing a shape 


in Photoshop tutorials — perhaps people just and applying a preset style from the Styles 
. palette, then Shift+click on another style to 

think of Drop Shadows, Bevel and Emboss add the attributes of the second style to 

and start to cringe. But there’s a lot more to the first. You can combine as many preset 


Layer Effects than that. Here we show you the __ stylesasyou like, but bearin mind that 


“ye ° . some styles will overwrite the settings of 
versatility and extraordinary power of putting cthiens ethey both uae ta daneaides. 


Layer Styles to anumber of commercial uses Web designers using Photoshop to 
create buttons and other graphics will 
already know that Layer Styles are a useful 


ADDING A REFLECTIVE EFFECT 


This digital photo for a car magazine was shot on a dull To add reflections, create a new layer and make a 

day without any direct sunlight, so the subject looks a selection of the car's surface (Select>Colour Range). 
little too flat. Three adjustment layers have already been Apply Bevel and Emboss using an Inner Bevel with a Ring 
added to brighten and colour-balance the image. —Triple Gloss Contour. Now apply the other Contour. 


To blend the effect in, set the layer to Soft Light and the See the difference? The car's surface now picks up 

Fill to 50 per cent. Add a layer mask (to paint out areas reflections from its surroundings, making it really 
where the effect looks wrong). Next, using a variety of stand out from the background. Often, a quick process 
brushes and opacities, paint along the contours of the car. like this can add a bit of magic to a flat-looking shot. 


m= SHORTCUTS 


tool when you need to create graphics 
quickly. But the graphic designer or 
illustrator may not be aware of their 
potential. You can also use Layer Styles 
to simulate natural-looking textures such 
as water, stone or metal, to create logos 
orto add extra texture to illustrations. 

When Photoshop 7 was released, 
Layer Styles received a host of new 
options with increased capabilities, 
enabling the creation of some stunning 
effects. A useful new option that has 
been added to most of the styles is the 
Contour option. The contour is the curve 
that the effect follows. Basically, this 
option enables you to change the 
landscape of the curve to create valleys 
and ridges on the effect, making it dip 
and rise over the layer’s content. 

There are a set of contours for each 
effect, but you can make up your own by 
clicking on the preview window to bring 
up the Contour Editor. From here you can 
customise contours by adjusting the curve 
as you would in the Curves dialog box. 
This option is essential for achieving 
realistic liquid or metallic effects, as it adds 
extra dimensions to the effect. The Bevel 
and Emboss effect has two contours to 
work with: the Gloss Contour helps to 
create a shiny surface, and an extra one 
increases the effect even further. The 
contour option has a Range value that 
dictates the coverage of the effect, with a 
lower value giving tighter contours. 

As its name suggests, the Satin option, 
also introduced in Photoshop 7, adds a 
satin finish to the layer content. Again, 
applying this option helps to give the 
impression of depth by adding highlights 
and shadows within the contours of the 
effect. Using different contours also helps 
to make the affected area look more 
chaotic (useful when emulating liquid). 

Layer Styles also come in useful when 
you need to add effects such as reflections 
or texture to photographic images — see 
the walkthrough to the left, where the 
surface of a rather dull-looking car is made 
to look clean and shiny. Funnily enough, 
we achieved this effect using just Bevel 
and Emboss, which goes to show that 
Layer Styles aren't just about adding the 
usual Drop Shadows and Emboss effects. 

When used carefully in the right way, 
these powerful tools can create amazing 
effects to transform an image into 
something really special. [| 
INFO Expertise supplied by Frank Bartucca, 


bartucca@btinternet.com 
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COLOUR THEORY 


With a little understanding of the science of colour — from theory 
through to colour management -— you can make your designs 
more purposeful, better co-ordinated and reliable at output 
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ave you ever 
turned green 
with envy? Does 
winter time give you 
the blues? Perhaps someone’s made 
you see red recently? Colour’s such an 
emotive thing that we use it to describe 
how we feel, as well as what we see. 
While we can measure and calibrate 
colour scientifically, its perception at 
both an individual and cultural level 
remains an equally important factor. 
As children, we're told that the sky 


always interpreting our 
environment, rather than seeing 
what's actually there. Of course, a 
skilled designer can turn this on its 
head to trick the eye, but you need 
some understanding of how it works 
before you can play that game. 


when this light falls upon an object, it’s 
modified in some way so that only 
certain wavelengths are reflected 

back, while others are absorbed. If the 
object's surface is smooth, the reflected 
light is bright and sharp; if rough, the 
reflected light is much more diffuse. 


producing intermediate colours (that’s 
how TV screens and computer displays 
work). Showing the RGB colours at full 
blast produces a mix which appears to 
the human eye as white, while no 
primaries — thatis, no light at all — 
effectively leaves blackness. (Note, 


IF THE SURFACE IS SMOOTH, THE REFLECTED 
LIGHT IS BRIGHT AND SHARP; IF ROUGH, THE 


REFLECTED LIGHT IS MUCH MORE DIFFUSE 


COLOUR DEFINED 


So much for the mechanics of 


and sea are blue. From that day 
onwards, every sky we paint or draw is 
always bright blue, and every instance 
of water — be it river, pond or puddle—a 
deep azure. Growing up, we eventually 
realise that colour is subject to how 
each individual sees it, and that we're 


Sir lsaac Newton was the first to lay 
down the foundations for a true science 
of colour (chromatics). He identified 
that ‘white’ light could be split into 
many colours using a glass prism, and 
concluded that white light itself must 
contain all the wavelengths within the 
visible spectrum. It followed, then, that 


colour perception. More useful to the 
designer is an understanding of how 
we can use colour to our advantage. 
At its most basic level, light can be 
broken down into three primary 
tones: red, green and blue (RGB), 
with various proportions of each 


METAMERISM 


When two different colours look exactly the same 


Colours look different when you view them under different 
light sources. This is always a challenge for the indoor 
photographer, as well as print proofer. But there’s another 
sneaky little problem with looking at colours under the 
‘wrong’ light: it’s possible that two different colours under 
a particular light source will actually look the same. This 


Only 5cm across, a RHEM strip shows you immediately when the 
light isn’t perfectly 5000K. A pack of 50 will set you back around £44. 
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effect is known as ‘metamerism’ and it demonstrates 
the limited ability of the human eye to deal with certain 
wavelengths in the visible spectrum. 

Obviously, it really only happens when the two colours 
are roughly similar to start with but, under certain conditions, 
the difference can suddenly become very dramatic. A simple 
example might be to take a sheet of office paper and a sheet 
of coated inkjet paper into daylight, where they look the 
same. Now bring them indoors and view them under a 
domestic lightbulb; the coated paper will appear yellowish. 

The best way to minimise the risk of wrongly identifying 
what you see in a colour-controlled environment is to use 
a light-hood with the correct D50 bulb fitted to check your 
proofs. If you're unsure whether you're viewing artwork 
under the correct quality of light, attach RHEM strips -— 
little stickers from Typemaker (www.typemaker.co.uk) - 
to your proofs. These reveal stripes if the light isn’t right. 


however, that RGB isn’t the last 
word in colour perception theory — 
for more details, see ‘Theories of 
perception’ on page 69.) 

As Newton hinted, light is modified 
when it’s reflected back from an object. 
What you see isn’t the original light, but 
reflected light stripped of most of its 
wavelengths. In these instances, the 
principle of the light primaries is 
reversed — put into negative, if you like. 
This means that reflected colours need 
a subtractive theory to define them. 
Using filters, scientists discovered that 
red-green-blue had a reflective primary 
equivalent of cyan-magenta-yellow 
(CMY). In complete contrast to the 
additive primaries, mixing solid CMY 
paints or inks produces black, while no 
CMY primaries creates ‘nothing’ —the 
Paper or canvas remains white. 


COLOUR IN COMPUTERS 
People have been mixing paints since 
prehistory without the aid of scientific 
descriptions of colour. But at some 
point, a gadget known as a ‘colour 
wheel’, was devised. Used extensively 
by painters, it helped the artist identify 
groups of colours that harmonise 


rather than clash (see ‘Colour wheels’ 
on page 70). It’s still used today when a 
colour scheme is required that won't 
grate on the eye. Expert designers 
might belittle the gadget as a prop for 
students and the inept, but if you're 
unsure about devising a scheme that, 
for example, sits well alongside a 
corporate colour or logo, or works 
across an entire rebranding job, it can 
prove a godsend. 

So far, though, such gadgets simply 
help you evaluate the use of colour. 
Before a computer can do the same, it 
needs to appreciate what colour is and 
then numerate it. This is where theories 
of visible colour as three-dimensional 
models — or ‘spaces’ — come into play. 
RGB, CMYK, HSV, LAB, and so on all 
describe colour spaces (see ‘Theories 


THEORIES OF PERCEPTION 


How do you quantify light and its properties? 


For a long time, the most 
widely accepted theory of 
colour vision was proposed 
by Thomas Young in 1807, 
and developed by Hermann 
von Helmholtz in 1859. It 
describes three types of 
receptor ‘cones’ in the retina 
(the light-sensitive area at 
the back of the eye) linked to 
the brain by a series of neural 
networks, each responsive to 
either red, green or blue 
wavelengths of light. 
Unfortunately, the theory 
doesn't take into account 
the perception of yellow, a 
colour which doesn’t appear 
to bear any relation to the 
red, green or blue primaries. 
So in 1878 Ewald Hering 
proposed an ‘opponent 
response’ theory which 
added yellow as a fourth 
primary, and set them all in 


Abig problem with these 
theories is that they treat 
colour in isolation from 
the quantity and quality of 
light itself. In the 1920s, a 
commercial artist and 
teacher called Professor 
AH Munsell established a 
classification system in 
which every colour is defined 
by three attributes: hue 
(the basic colour), chroma 
(intensity or saturation) 
and value (lightness or 
brightness). It was the first 
theory to define colour 
within a three-dimensional 
space. Variations of this 
hue-saturation-value 
system are known as HSV, 
HSL and HSB, but they all 
mean the same thing. 

In 1942, Richard Hunter 
adapted this theory to 
produce a colour model he 


white, ‘a’ the red/green axis 
and ’b’ the blue/yellow axis. 
This was further refined in 


Young / Helmholtz system 


Colour theory ae 


1976 by the Commission 
Internationale de I’Eclairage, 
under the name CIELAB.1. 


opposing pairs: red/green, 
blue/yellow and white/black. 


of perception’ above). LAB is 
considered the biggest and therefore 
the most useful umbrella colour space 
by which all others can be evaluated, 
although bear in mind that, while LAB 
defines all visible colour, it’s a system 
principally geared towards the printing 
industry. Another system, known as 
LUV, defines colour in additive light 
produced by displays and projectors. 
Despite the importance of LAB, most 
designers work in one of the other 


ColorCheckerRefFile.txt 


(Show Samples 
ignore Glossy 
CBrighter 

(Use Largest Window 


Profile Name for Display: 


HP C850 indoor no flash| 


You can colour-profile digital cameras using products such as Pictographics’ inCamera. You 
must do this afresh every time you shoot, though, because the lighting conditions will vary. 


called L*a*b. ‘LU’ represents 
lightness from black to 


colour systems because they’re more 
familiar — and, besides, LAB is hardly 
the most intuitive way of picking 
colours. Thankfully, you don’t need to 
worry about this too much; what's 
important is that LAB forms the basis 
for modern colour management. 


COLOUR MANAGEMENT 


The principle of colour management is 
to ensure input devices such as 
scanners, cameras, photo libraries 
and your display all share the same 
definition of colour, and that this in 
turn matches those definitions 
produced by output devices such as 
printers, projectors and (yes, again) 
your display. Actually, these devices 


300mm 400mm 500mm 


ultra-violet violet 


GREEN YELLOW 


blue-green yellow-green orange 


Several systems to define colour perception have been proposed 
over the past 200 years, with CIELAB the currently accepted form. 


define colours in wildly different ways, 
but by measuring each one, it’s 
possible to map out these differences 
and then compensate for them. 

This is where colour management 
software comes in. It makes dynamic 
conversions in the colour make-up of 
your designs as they're exchanged 
between said devices and your 
computer. Rather than constantly 
changing the data, which would be 
progressively destructive, the software 
uses ‘profiles’ (simply files which 
contain information on the colour 
space capabilities of a device) to 
make the conversion on the fly. 
The software sits in the 
background, applying LAB 
definitions in these profiles as 


RED 


600mm 


infra-red 


The electromagnetic spectrum in all its glory: visible light resides in the wavelengths between 
380nm and 760nm. To the left lies cosmic radiation; to the right, radio. a 
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How to ensure you obtain the ideal colour match 


Artists have being using 
colour wheels for centuries 
to help them pick harmonious 
colour schemes. They're 
basically a spectrum bar 
bent around into a full circle, 
traditionally in 12 sections, 
with red, yellow and blue 

as primaries. Don’t forget 
that the colour wheel was 
originally invented for 
paints, not computers. 

The principle is that the 
wheel provides a visual 
indication of how the various 
primary, secondary and 
intermediate colours relate 
to each other. In the first 
instance, it reveals opposites, 
such as red/green, orange/ 
pale blue and so on. These 
are ‘complementary’ colours. 
Then you have groups of 
adjacent colour sections 


you scan and print, using a 
device-independent ‘working 
space’ as a virtual locale where the 
original, ideal colour definition of 
your artwork can sit unabused. 


in the wheel, such as orange- 
red-mauve. These are 
‘analogous’ colours. 

Going further, you can 
draw symmetrical triangles 
across the wheel, or even 
squares and rectangles, to 
pick further complementary 
colour schemes. 

You can buy colour wheels 
from many art suppliers 
(a $45 software wheel is 
available from Tiger Color 
at www.tigercolor.com). 

Our favourite is a Flash colour 
wheel hidden away on the 
HP Website at http://h40099. 
bbn-stage.europe.hp.com/ 
country/me/eng/color/art_ 
hp_colour_wheel.html. This 
helps you pick schemes from 
a pure gradient spectrum 
wheel, and gives you precise 
RGB and CMYK values. 


A colour wheel helps you pick harmonious schemes, known as 
‘colour chords’. These ensure eye-pleasing combinations every time. 


Although colour management 
software works automatically, it makes 
huge demands on the designer to 
make it work properly. First, you have 
to ensure the colour profiles are 
accurate and up-to-date for each 
device, and this includes, if appropriate, 


one for the final printing press. Second, 
you need to configure each design 
software program to use the same 
profile setup, including your choice of 
profile for the working space. Don’t 
confuse this with your monitor profile, 
which ultimately is just another input 


and output profile, crucial though it is. 
Third, you need to be specific about 
where your designs are headed, and 
assign the correct output profiles. 
Otherwise, your colours will be shifted 
twice when you choose another profile 
during proofing and printing. It gets 
very complicated at this stage, so it’s no 
wonder that many studios cringe at the 
thought of colour-management and 
that printing companies often ask 
designers to switch it off completely. 
This gives rise to another common 


management ensures a duff photo 
will look duff in print and on a Website. 
In nine cases out of ten, a customer 
would rather it looked better, than 
stayed faithful to a dodgy original. 

Commercial printers have operated 
in this way for the best part of acentury, 
which brings us neatly back full circle. 
Colour in design is principally, quite 
possibly wholly, a matter of 
perception; everything else is just 
down to scientific nuts and bolts. 

And nuts and bolts, of course, only 
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The central point of a colour management system for the designer is your ‘working space’, 
not the display profile, as many people believe. From here, colour consistency is assured. 
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practice in the commercial field, which 
suggests it’s better to produce pleasing, 
rather than accurate colour. Colour 


come in different shades of grey. 
INFO Words by Alistair Dabbs, ali@dabbsnet.com 


Edit Colour 


Name: 
PANTONE Rubine Red C 


Model: ‘ PANTONE® solid coa... aA 
w Spot Colour 


Halftone: {Process Black 


New: 


Original: 


Cancel 


When you’re using colour libraries such as Pantone in your design software, don’t forget 
that they're meant to be used with printed swatches. Otherwise, they can mislead. 
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an 
T-shirt design =m (>) 
Big 


PHOTOSHOP 


T-SHIRT 
DESIGN 


Photoshop is a great place 
to craft successful T-shirt 
designs that won't break 
your budget. In this tutorial, 
we usé a digital approach 
to create a deconstructed 
look and style 


T-shirt design can be a pricey business. There 
are so many things to consider when you enter 
your local print shop: the expense of four-colour 
processing, the complexity of creating multiple 
templates, not to mention the cost of creating 
each individual screening template. There's even 
a cost associated with opening multiple digital 
files. The list can go on and on, while your pocket 
becomes lighter and lighter... 

Well, there are ways around this spending. 
This tutorial will show you an approach to 
designing T-shirts that doesn’t use multiple 
templates, multiple files and multiple colours. 
Less is often more, and simplifying the process 
won't detract from your designs. We'll create a 
T-shirt design with only one colour, that you will 
incorporate into one template, that you can then 
deliver to your printer in one digital file. 

Your costs will be cut substantially but your end 
result will be innovative and stylish. 

We're going to use Photoshop to create a 
design that looks antiquated and deconstructed. 
It will appear as if the shirt had been washed 
several thousand times, but will retain a degree 
of vividness. With a little technical forethought, 
Photoshop can save you a lot of cash... 


ON THE DVD 
: ~\. The files you need 
faces” | to complete this 
\ “—_ / step-by-step guide 
—__ to T-shirt design 
are on the DVD in the folder 
1_tshirt_p72. Artwork and 
words by Vincent Marcone. 
Head to his infamous, 
ghostly site at 
www.mypetskeleton.com, 
or email vincent@ 
mypetskeleton.com. 


w | 
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PART 1 CREATING 
CONTRAST 


Our design needs to be bold and 
visually impressive | 


This photograph has a strong sense of form and 

structure. The bare tree has an almost skeletal 
quality about it, which should work quite well as 
a silhouette and even better as the focus for the 
composition of this design. When picking images for 
T-shirts, it’s important to have strong visual elements 
to play off each other. There’s no room for subtle 
shapes and delicate compositions. 


Ne Saturation 


First, open the file tree.jpg from your DVD 

and remove its colour. To do this, open the 
Hue/Saturation box from the Image tab at the top 
bar and go to Adjustments (press Ctrl+U on the PC, 
Command+U on the Mac). Slide the Saturation bar 
to -100, and keep the file in RGB mode so that we can 
experiment with colouring later. 


Now we want to remove as much grey as 

possible from the image by using the Levels box. 
Go to Image at the top bar and select Adjustments, 
then highlight Levels with your mouse (Ctrl/ 
Command+L). Drag the black arrow to the right and 
white arrow to the left. You will notice that the grey 
has been removed from the photograph and replaced 
with true backs and true whites. Keep adjusting these 
arrows until the photo looks like a silhouette. 


PART 2 FRAMING 


Design a frame to complement the 
image and to push the overall 
uniqueness of our T-shirt design 1 


Drag the tree silhouette into a larger window, 
say 20cm wide by 30cm high, to give yourself 
more space for designing a frame. Make sure 
the background is black. Now, using the Circular 
Marquee tool, generate an oval selection to crop 
the tree, then invert the selection (use the shortcut 
Command/Ctrl+Shift+!) and fill it with black. 


Find the centre of your oval shape by noting the 

grid and placing the guides into a centre. From 
that centre point, use the Circular Marquee tool and 
press Option (Mac)/Alt (PC) to create a new oval that 
overlaps the picture. Fill with white and lower opacity 
to 50 per cent so you can see how it's placed. To 
adjust the oval, use the Transform tool (Command/ 
Ctrl+T) and move the oval until it overlaps the picture. 
Repeat the steps to make a smaller oval that slightly 
overlaps the original picture. This time, fill the oval 
with black and bring the opacity down to 60 per cent. 


Adjust the black and white oval layers back to 100 

per cent. Reselect the black oval by going to the 
Layers palette, clicking directly onto that layer while 
pressing Command/Ctrl. A Marquee selection should 
now surround the smaller black oval. Make sure your 
large, white, oval layer is selected and hit the Delete 
button. Once you trash the black layer (or turn it off) 
you should have a clean, white, oval frame that 
surrounds the silhouette of the tree. 


Open the file named frameparts.psd (on your 

DVD). You will notice two ornate pieces that we're 
going to use to add to the current oval frame. These 
layers were built by experimenting with the Pen tool. 
Always keep your experimental work — you never 
know when it will come in handy. 
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Duplicate each layer and flip it vertically by 

selecting Edit from the top bar and highlighting 
Transform. Position the mirror images of each so 
they are touching each other, then merge them within 
the Layers palette: just highlight the layer and click on 
the empty box of the mirror layer so that a chain link 
icon appears. Go to the Layers tab and select Merge 
Layers. Do the same to the other layers. 


Now that you have two separate layers, we're 

going to merge them into one. Centre the designs 
into each other as above. Drag the layer into the 
working T-shirt design and invert it (Ctrl/Command+l). 
Go to the Layers palette and switch from Normal to 
Screen. Move the ornate bracket just slightly into the 
middle of the oval so that it appears to be fused within 
it, then duplicate the layer, positioning its reflection on 
the opposite side of the oval. 


PART 3 RAVENS 


Adding the ravens will give both 
purpose and theme to our design 


1 Using the Pen tool, create a profile of a raven. 
If you're not confident doing this freehand, you 

may want to sketch a bird profile and scan the image 

into Photoshop to trace. It’s important to make sure 


that the profile of the bird is believable. 


Once your bird is complete, grab a selection by 
11 pressing Ctrl/Command while clicking on the 
path layer. Open a new layer and fill the bird selection 
with black. 


, 


1 place it onto one of the branches. The presence 
of this bird suddenly breathes a little life into the 


design, as it’s become a part of a story. 
pee’ ay? 4 \ 


1 Our bird needs eyes. Create a small circle 
on a separate layer and fill it with white, then 
merge the layers. 


- 


Xr 4 

The raven is a little too crisp against the 
14 background; he needs to be integrated a little 
better with our tree. Pick the Blur tool, which looks 
like a teardrop located within the toolbar. Without 
overdoing it, blur some of the edges of our bird so 
that it doesn’t look quite so clean. 


Duplicate and flip the raven horizontally and 
1 place it on another branch on the opposite side 
of the tree. We don’t want the ravens looking perfectly 
symmetrical to each other. Select the Liquify option 
from the Filters tab on the top bar. Using the Warp 
tool, slightly push the back of the raven up and move 
the breast out. This is an important but subtle detail. 


T-shirt design mam 6) 
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x 
1 Make sure the ravens are placed onto branches 

that look as though they could support their 
weight. If you need to adjust the branches by making 
them longer or thicker, simply cut branches onto new 
layers and multiply (Layers palette) them over the 
branches beneath until you're satisfied with your 
modified tree. You can use Transform (Command/ 
Ctrl+T) to change the girth and length of your selected 
branches before you multiply them. 


PART 4 AGEING 


To give this T-shirt a sense of age, it’s 
important to incorporate the right type 
of texture into the design J 


17 Open the file texture1.jpg from the DVD and 
drag it into the working T-shirt design window. 
Using the Clone tool, spread the texture completely 
around the entire frame. Try to keep the texture 
looking sporadic, so that it doesn’t appear to be too 
predictable. Once the frame is covered, multiply the 
texture in the Layers palette. 


1 remove the grey tones by using the Levels box 
(Command/Ctrl+L). Manipulate the arrows until the 
greys are replaced by true whites and true blacks. 
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Illustration 


Now select your favourite sections of the 
1 texture and drag them onto the main file. 
Try not to be too calculating; the texture should look 
accidental and dilapidated, not a predictable pattern. 


Saree 
2 Multiply each texture from the Layers palette, 
and continue to manoeuvre them until you're 
satisfied that the design has a sense of age about it. 
Save and rename your file, then flatten the image by 
going to the Layers tab at the top bar and selecting 
Flatten Image. This will merge all your labels into one 
background, making it easier to work with. 


2 Invert your entire image via Ctrl/Command+l 
so that the design looks like a negative. You are 
now ready to send to the printer! 


INVERTING 

YOUR DESIGN 

The file that you supply to your printer will 
become the template for screening the ink onto 
your shirts. The ink adheres itself to wherever 
there is black hue on your file. Each black pixel 
is information for the template that guides the 
ink, which is why it’s necessary to invert your 
finished piece. 


LIGHT VS DARK 

lf you happen to decide on a light shirt as a 
backdrop for your design, you will only need 
the printer to do ‘one pass’. This means that 
the template placed onto your shirt is inked just 
once. However, if you choose a darker shirt, 
which includes mid-range hues such as red or 
green (not just black), you should instruct your 
printer to do a ‘double pass’. It will be slightly 
more expensive but worth it in the long run; 
your shirts will be more durable and vibrant. 


1 COLOURS 


Now the fun part— using Photoshopto 
pick your colours for the T-shirt design 


Color Range 


ect: | 7 Samoied Colors 


|" Selection Preview: | None 
y - 


A 
2 Go back to the original file and rename it 

‘colourtest'’, then flatten. It’s best to rename 
your files according to their purpose to avoid 
accidental re-saves. Go to the Select option (top bar) 
and choose Colour Range. A colour picker will replace 
your mouse arrow; go to a white section of the design 
and click your mouse, then slide Fuzziness all the way 
to 200 within the Colour Range box and click OK. 


2 Create another layer and fill the selection with 
a bright colour such as red. Each pixel that 
was once white has now been replaced with a red 
hue. This new layer represents the colour of ink that 
you will choose for your design. Label it ‘Ink Layer’. 


Repeat step 22 by choosing Colour Range, but 
24 this time choose the surrounding black with 
your colour picker. Create another layer and fill the 
selection with another bright colour, such as green. 
This new layer now represents the colour of your 
shirt, which will work as the backdrop to your design. 
Label the layer ‘Shirt Layer’. 


tan wee A 3 = 


We now have two layers to experiment with. 
25 Choose the Hue/Saturation box and slide the 
arrows to get every possible colour combination that 
you think might suit the design and style of your shirt. 


Gold Orange Red 


Burgundy Navy Forest Green 


2 Your screen printer will be able to match up 
almost any colour of ink that you come up 
with. However, you are considerably more limited 
with the colour of your T-shirt. Keep this in mind 
when experimenting. Your best bet is to get a fabric 
swatch of T-shirt colours. Your local screen printer 
should be able to supply you with different swatches. 


FINAL STEP 


he final stage is physically picking up your shirts 

from the print shop. You've now created a set of 
dynamic and unique T-shirts without breaking your 
budget, and you've done this without using multiple 
colours or templates. One screen is all that is required 
to achieve a design using this technique. |_| 


WIN ROYALTY-FREE CDS 


Competition ™ 


Win one of two royalty-free image CDs worth more than £1000 courtesy of Digital Vision 


e’ve teamed up with creative resource 

company, Digital Vision, to give two 

Creative Collection 2003 readers one of 

the company’s most popular image 
catalogues on CD — Turn on, Tune in. Worth £549 each, 
the collection features 100 lifestyle images from the Vie 
range for use in print work, illustrations, Websites and 
more. Turn on, Tune inis one of hundreds of CD 
collections available. 

In addition to its wide range of royalty-free image 
discs and huge photo library, Digital Vision has a 
massive font, illustration, music and movie clip 
collection — all searchable on their Website. 

Always at the forefront of industry developments, 
Digital Vision’s popular /nfinity illustration collection, 
featuring contemporary, abstract imagery, reached two 
series. Now the company’s new Illustration catalogue 
features more than 1000 images from leading 
illustrators worldwide. 

And, as an added sweetener, Digital Vision has 
recently introduced a new loyalty scheme so that 
regular customers can spend their collected Vision 
Points at online booksellers, Amazon. 

To have your chance of winning one of these 
fantastic CDs, all you have to do is answer a simple 
question and enter via our Website or via mail. 


INFO  edlatealvisionseline Soaik 


QUESTION WHAT |S 
THE NAME OF DIGITAL 
VISION'S SEEMINGLY 
ENDLESS ABSTRACT 
[ILLUSTRATION SERIES? 


TOENTER 

Try the easy way, via our Website at 
www.computerarts.co.uk/competition. 

Click on the Digital Vision Competition and enter via the 
link at the bottom of the page. Answer the question, fill 

in the rest of the form, then click Submit Entry. You can also 
enter by sending us your answer on a postcard to: Creative 
Collection Competition, Computer Arts, 30 Monmouth 
Street, Bath, BA1 2BW. Please include your address and 
telephone number, so we can contact you if you win. 


RULES 

Closing date is 20 January 2004. Employees of Digital 
Vision, Future Publishing and their agents and families are 
not permitted to enter. Multiple entries are not accepted. 
The editor's decision is final and there are no cash 
alternatives. No other correspondence will be entered into. 
If you are entering by post and do not wish any of the 
companies involved in this competition to contact you 
with further offers, please indicate this on your entry. 

We will not pass details on to third parties. | 
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poinecntee 


CHAPTER 2 


PROFESSIONAL 
GRAPHIC DESIGN 
AND TYPOGRAPHY 


8 


ehh ee 


» explained in this detffled tutorial 


TUTORIALS 
INDESIGN 2: PART ONE 


Start work on a corporate brochure in th 
first part of our layout and design tutori 


INDESIGN 2: PART 


Try out some creative techniques 
getting the document ready for 


QUARKXPRESS 


It was a long time coming 
than ever. Check out its n 


-CREATE YOUR 
OWN TYPEFACE 112 


Getto know the world of font design using 
FontLab—a top font creation and editing tool 


FEATURES 
TYPE CASTING 106 “4 


Leading font designers share their enthusiasm 
for new typefaces and reveal their inspirations 


SHORTCUTS 


One-page tutorials to refresh your skills \ 


INDESIGN 105 


Working with the eyedropper tool 


LAYOUT AND DESIGN 


INDESIGN 2: 
PART ONE 


Discover how to produce a 
brochure in InDesign 2, as we 
highlight some of the features 
that help make it such a supreme 
page-layout application 


Some of the main requirements when producing a 
brochure - or any longer document — involve ensuring 
that consistency is maintained from page to page, and 
that key elements can be changed quickly, cleanly and 
accurately as the design progresses. Here, we examine 
InDesign’s novel approach to redefining style sheets 
and complementary colours, and show you its variety 
of benefits. We'll also be looking at how the program's 
guides, grids, layers, libraries and tables can be utilised 
for this type of work. 

However, where /nDesign completely rewrites the 
rulebook is in the amount of creative work you can do 
in the program itself — without hitting a brick wall and 
having to go off into another application — and in the 
phenomenal way it integrates with its siblings. 

In this tutorial we focus on working with //lustrator. 
Then on page 87, we show you how well /nDesign can 
work with Photoshop as well as looking at other ways 
of making pain-free global changes. 


INFO Expertise from InDesign training specialist Chris Gregory. Contact him on 
07967 372 699 or inddtraining@mac.com 


ON THE DVD 
Your coverdisc 
© has all the text 
and images you 
need to follow this 


tutorial. Look inside the folder 
called 2_indesign1_p82 to 
begin. All images are for 
personal use and are not to 
be reproduced elsewhere. 


www.magictorch.com 
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ART 1 THE 
MASTER PAGES 


We'll start by setting up the document, 
then generating the repeating master 
page items J 


New Document 


CG Facing Pages 
CO Master Text Frame 


Gutter: $4,233 mm | 


Start with a new A5 document using the values 
shown above. Although we'll be using facing 
pages in the document, leave this option off, as we'll 
create three-page spreads with master pages. The 
contents will be varying from page to page, so you 

can leave Master Text Frame unchecked, too. 


Based on Master: [None] 


} Number of Pages; 


In the Pages palette, double-click the A-Master 
icon. From the Pages palette menu choose 
Master Options For “A-Master”... and change 
the Number of Pages setting to 3. Place the image 
Background.jpg (on the DVD) so that it bleeds off on 
all four edges of the spread. Change its Opacity to 
20 per cent with the Transparency palette. 


Place an identical rectangle on top (with Step 

and Repeat or Copy and Paste in Place), fill with 
[Black] and set Opacity to 30 per cent. Command-click 
with the Selection Tool to select through the stacking 
order and experiment with different Opacity settings 
and Blending modes. 


SS RUE BEAT 


REFINED PALETTE 


The document becomes more navigable if 

you ‘tweak’ your Pages palette display options. 
Choose Palette Options from the Palette menu, 
turn off the Show Vertically options and choose 
the palette window to update the view, but 
you should now be able to see a good part of 
longer documents in a handy horizontal format. 


KMS aaa 


Use the Pen tool to create a triangle in the bottom 

right-hand corner of one of the pages. With the 
Swatches palette, create a new green colour swatch 
(C=75, M=5, Y=90, K=40 for example). Apply as a Fill 
and change Stroke to None. Change the Blending 
mode to Colour Dodge with the Transparency palette. 


Swatch Name Cabs Mab Y<100 Rath 
Seoseruajenon a) 
Colour ete: (ame 
on ——e 4 
Ot ee ON 


Alt+Shift-drag the triangles with the Selection tool 

to copy and move to the other two pages of the 
spread. Double-click the green swatch and click on 
Preview. Shift-drag any slider to shift all colours 
proportionately and see changes in the document. 
Click OK to update changes to swatch and triangles. 


Create a header panel across the spread with the 

Rectangle tool. Fill with the same green colour, 
but change the Blending mode to Overlay. Choose 
Object>Drop Shadow and click Preview on. Try out 
different combinations to get your preferred effect. 


Nippaiue tae Sen hee ee 


Drag a text frame on top of the panel across 

the three pages. Choose Type>insert Special 
Character>Section Marker — twice. Format font and 
size, then colour one white [Paper] and one Yellow. 
Copy and Paste repeatedly across the page. We'll be 
returning to use this feature to good advantage later 
in the tutorial. 


SECTION 


byes al | th 


Now we'll create layers to help with organising 

the layout and determining its stacking order. In 
the Layers palette, Alt-click on the Create New Layer 
button and create layers named ‘Panels and Images’ 
and ‘Text’ (topmost). Select the appropriate elements 
in the Layers palette and drag the coloured dot 
marker to the correct layer. 


Drag two three-page masters into the document 

area of the Pages palette. Drag the original single 
page onto the palette’s wastebasket icon to delete. 
The ‘chequerboard’ background of the master and 
document page icons indicates that transparency 
(including a Drop Shadow or Feather) is present. 


=> 
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“ART 2 STYLES 


InDesign Paragraph and Character 
Styles ensure speedy, consistent 
formatting of text and make global 
reformatting acinch J 


1 0 Go to page 1 of the document. Select the 
Text layer from the Layers palette. Choose 
File>Place and open Services Intro.doc. Drag 
the loaded text pointer to create a text frame 
approximately half the page deep. 


|| Gitlin Started 


1 1 Select and format distinctive title text, body 

text and sub-headings using the Character 
and Paragraph settings. For best results you might try 
Optical kerning on the title. Or, if you have access to 
an OpenType font, you might try some of the options 
available from the Character palette menu. 


1 vs Highlight the heading paragraph and choose 

Type>Paragraph Styles. From the palette 
menu choose New Paragraph Style. Ensure that 
Based On is set to [No Paragraph Style] to help avoid 
formatting complications. Note that each style can 
have its own Hyphenation and Justification settings. 
Click OK to save the style. 
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1 The style name now appears in the Paragraph 

Styles palette. Next, highlight each styled 
paragraph in turn and click on the style name to apply 
it—this action will become particularly important, as 
we're about to use global reformatting. Click in the 
unstyled paragraphs and apply styles to quickly, 
consistently format the text. 


Redefine Styte XORR 


1 Now for the global reformatting — as 

mentioned, an utter joy in InDesign. Simply 
highlight a representative paragraph and reformat 
accordingly. Next, choose Redefine Style from the 
Paragraph Styles palette menu and all associated 
paragraphs also change. This superb feature even 
has its own shortcut (Command-+Alt+Shift+R) to 
speed up the process further. 


1 5 This ease of use applies equally to using 
Character Styles to pick out selected words 

within the main body of text. You might also use this 

feature as a way to consistently format dropcaps. 


PART 3 GUIDES 
AND GRIDS 


InDesign has some great features 
for creating guides that help put the 
layout together 1 


sine a ee 


1 Page 2 will be the Outside Back Cover, with 
a gallery of images and tinted panels. To 

help position them we'll create a custom grid. 

First, create a new layer called Guides, then choose 

Layout>Create Guides and specify 10 columns, 

10 rows, 3mm Gutter and Fit Guides to Margins. 


1 Hide Layer 1 temporarily by clicking its eye 

icon in the Layers palette. Select the Panels 
and Images layer and draw out six rectangles for the 
images, plus accompanying panels to suit. Hide the 
Guides layer when finished. This is an excellent way 
of managing customised grids in your document. 


q 
INDESIGN TRICKS 


The humble Ait key can enhance the way you 
work in InDesign—here are three examples: 

+ Alt-click with a Transformation tool to set 

a point of origin and show a dialog box. 

- Alt-enter a Rotate or Shear value in the 
Transform palette to transform and copy. 

+ Press Alt and choose Type>Create Outlines 
to position a copy of the outline text directly 
(and accurately) on top of the original text. 

se ee os 


ey ' 


1 A novel feature with InDesign is its ability to 

drag images directly into the document. In our 
case, go to the Gallery Images folder (on the DVD), 
drag each image in turn into a frame then position 
and scale to taste. Check the Links palette to see that 
these are indeed linked rather than embedded 
images. 


PARENT AND CHILD 
TINT SWATCHES 


Use this feature to change multiple 
complementary colours in your 
document - instantly 1 


19 In the Swatches palette, create a New Colour 
Swatch named ‘Green’, with the values C=75, 
M=5, Y=100, K=40. Choose New Tint Swatch, specify 
a Tint Value of 90 per cent and click OK. Repeat for 
Tints of 70 per cent and 55 per cent, for example. 


2 Drag the swatches directly onto the panels 
in the document. Experiment with different 
combinations of light and dark tints. 


2 In the Swatches palette, double-click the 

original Green swatch and turn on Preview. 
Adjust the colour values to see how all associated 
‘child’ swatches instantly change in the document. 
Click OK to update the document. 


ILLUSTRATOR PATHS 
InDesign’s superb integration with its 
sibling application opens up unique 
design possibilities 1 


2 Open the Illustrator document named Garden 
Paths.ai (on the DVD). Select an image and 
drag into position on a green triangle in your InDesign 
layout. Repeat for the other five images. Note that 
these images do not appear in the Links palette as 

they are now embedded editable paths. 


GET SOME GUIDANCE 
You can also create custom grids by duplicating 
and distributing guides. To do this, drag a ruler 
guide onto the document and leave selected. 
Use Edit>Step and Repeat to duplicate the 
appropriate distance and number of times. 
Now, if required, drag the outer guides to the 
edges of the grid and select with the Selection 
tool. Use the Transform palette’s distribute 
options to evenly spread out the guides. 


InDesign 2 >a 4 


2 You can quickly and easily re-colour the 

images. Type D to instantly format with 
Default Stroke: Black 1pt, Fill: None (Transparent). 
Next, double-click the Line Tool to activate the Stroke 
palette and change Stroke Weight. Finally change 
the Stroke colour to a Green tint to taste. 


2 Drag the main Groovy logo into position on 

page 3. You can now re-colour its individual 
paths by simply dragging on colours from the 
Swatches palette. This feature is potentially a great 
time-saver for elements which would normally have 
to be changed in ///ustrator and re-imported into the 
main layout each time. 


USING LIBRARIES 
As you might expect, /nDesign 
libraries are well put together J 


2 As we may want to repeatedly use our paths, 
we'll put them in libraries so we can access 
them quickly. Choose File>New>Library and name 
accordingly. (It’s recommended that you save the 
library on your local hard drive rather than a server). _s 
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2 Drag each item from the document into the 
6 Library palette and double-click to name. You 
can also specify an Object Type and enter keywords 
to help you when searching in future (using the 
Show Library Subset option). You might also create 
different libraries and group them together, as with 
any other InDesign tabbed palettes. 


Close Library 
Import Library Document... 


Add item 


27 As well as being able to drag library items into 
the document, InDesign also enables you to 
‘place’ them by choosing Place Item(s) from its palette 
menu. This will put the item in precisely the same 
position it originated — superb for elements such as 
picture credits. 


PART 7 TABLES 


No more fear and loathing when it 
comes to rows and columns of data 
that need formatting 1 


28 Go to Page 1, choose File>Place, locate 
Services Table.doc and drag out a frame 
below the introductory text. Highlight the text and 
choose Table>Convert Text to Table. As the text 

was tab delimited in the original Word document it 
converts tidily, although you could just as easily have 
placed a Wordtable or Excel spreadsheet. 
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Table Setup... 
Alternating Row Strokes... 


2 Click anywhere within the table with the Type 
9 tool. If not already visible, choose Window> 
Table. From the palette menu, choose Table 
Options>Alternating Fills. Click Preview on and Select 
Alternating Pattern: Every Other Row. Experiment 
with colour combinations for the alternating rows 
and click OK when satisfied. 


Rotate 


Table Options 
Cell Options 


Delete 
Select 


Merge Cells 
Split Cell Vertically 


Distribute Rows Evenly 


3 Next we'll insert two new columns. First, 
go to the top of the first column and click 
the downward-pointing arrow to select it. Choose 
Table>Insert>Column and insert one to the left. 
Repeat the process and add a column to the right. 


3 1 Position the Type tool between columns until 
the horizontal arrows pointer appears and 
until the columns fit within the text frame. (Shift-drag 
to move without changing the overall table width.) 
Select each new column in turn and use the Table 
palette to ensure they are the same width —- 10mm, 

for example. 


To put vertical text headings in the new 
3 columns, firstl highlight a column and choose 
Table>Merge Cells. Then, in the Table palette, choose 
the appropriate ‘T’ alignment and type out the 
headings (‘Service’ and ‘Details’). Use the Table and 
Paragraph palettes to align and indent within the cells. 


3 To selectively change Cell Strokes, highlight 
the appropriate area and make the Stroke 
palette visible. In the Preview panel click OFF the sides 
of the representation you don’t want to affect (Black 
denotes OFF and Blue ON) and choose Stroke Weight. 


FINAL STEP 


B i final steps involve fine-tuning the layout, for 
example adding an Offers banner (with Section 
Marker), redefining styles and dragging swatches 
and images onto the table until satisfied with the 
combination. On the next page, we look at adding 
elements to the other pages and affecting other 
types of global change. 


La 
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LAYOUT AND DESIGN 


INDESIGN 2: 
PART TWO 


In the second part of our tutorial, 
showing you how to create a 
brochure, we focus on how the 
sophisticated features and 
integration of InDesign 2with 
Photoshop can give you the 
creative edge with your layouts 


In the first part of this tutorial, we looked at some of the 
different ways in which InDesign can help you maintain 
consistency throughout a brochure, while making global 
changes quickly, accurately and efficiently. Some of the 
groundwork we prepared will now come in useful — in 
particular, the use of Section Names to change the 
season of the gardening brochure. 

We now take a closer look at ways you can use type ina 
document — both as a graphical effect on a path and pulled 
out of a background image — while maintaining legibility. 
And we'll have a good look at integration with Photoshop. 
The real eye-opener here is the ability to work with soft- 
edged layer masks for your cut-outs, adjusting masked 
images in the layout until you're satisfied with their 
position. We'll be adding effects such as Layer Styles and 
filters to immediately see their effect on layout and 
to introduce the radical potential of InDesign. In essence, 
this tutorial aims to demonstrate how you can produce 
more complex layouts faster. 

Finally, we'll be looking at various considerations for 
output. Clearly, these requirements vary from case to case, 
but you should find the tips helpful wherever your 
document may be output. 


INFO Expertise from /nDesign training specialist Chris Gregory. 
Contact him on 07967 372 699 or via inddtraining@mac.com 


ON THE DVD 
Look in the folder 
2_indesign2_p87 for 
the Garden Layout 
file to begin. All the 
files you need are on the DVD. 
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*~ART 1 PHOTOSHOP PART < SPEEDINGUP 
INTEGRATION TYPE ON A PATH manipulating paths, open up View>Optimised 


Display and ‘greek’ all the images in the layout. 


Setting up different paths in Use InDesign’s elegant drawing Ths ceamdd pecteaces ic, fo fabio ae 
Photoshop enables you to make and transformation tools to create individual image's display, select, Ctrl-click 
better creative choices in InDesign 7, exciting textual effects 7, and choose a Display Performance option. 


Place Flowers_cut.eps and Watering_can.eps 

(on the DVD) on page 4 of the brochure. Scale and 
move the images into position, as shown, cropping 
the watering can’s picture frame to a manageable 
size. Use the Transform palette to rotate the spout 
to something akin to the angle shown. 


Use the Line Tool to drag a diagonal line from the 
spout to just underneath the flower. Select the 
Type on a Path Tool and click at the top of the path. 
Choose File>Place, locate the Referrals folder and 
open Ref_01.doc. Now select the Pen tool and add 
an anchor point to the path’s central section. 


Now use the Transformation tools to fine-tune the 

paths. Use the Free Transform tool to both rotate 
(curved pointer) and scale (diagonal pointer), based 
on the selection’s centre-point. Use the Rotate and 
Scale Tools to transform to a specific point of origin 
(to the top lefthand corner, for example). 


Choose Object>Clipping Path and ensure that 

Photoshop Path is selected from the Type 
dropdown menu and that Preview is clicked on. 
Choose Path 1, 2 or 3 to see the options provided by 
paths previously created and saved in Photoshop. 


eae | 


To curve the path, select the Convert Direction 
Point tool, then press and drag from the new 
point to create direction points, as shown. Use To remove the paths, select and change the 


the Command key to access the Direct Selection Stroke to [None]. With all the testimonials 
Pointer, move the anchor point to the right and selected, experiment with different colours from the 


fine-tune the direction points. Swatches palette (ensure the Type Fill option is 
selected). If the screen doesn't update immediately, 
try using the Shift-F5 Redraw Screen shortcut. 


Click OK to choose your preferred version. Now 

we'll apply Transparency to the flower — such as 
Multiply with 80 per cent opacity —to help keep the 
text legible over the image. It will also be helpful to 
lock the image by choosing Object>Lock Position. 


Using the Selection tool, Alt-drag the path to 
duplicate and create more testimonials ‘raining 


down’. Now go to the Links palette and select the 4 5 
second Ref_01.doc in the list. Click the Relink button Choose Type>Type on a Path>Options and click 


Now change the orientation of the path type. 


the Preview button on. Feel free to experiment with 


and link to Ref_02.doc. After relinking the remaining : 7 
different Effect options from the dropdown menu. 


referrals, select and format with the Character palette. 
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THE MAIN SPREAD 


InDesign makes light work of ‘black 
on’ and ‘white out’ text on lightened 

or darkened images, with no need to 
make the usual foray into Photoshop “ih 


1 0 Place the images Before.jpg on page 5 and 
After.jpg on page 6, as shown. Scale and 

position them so that detail is visible in the top third of 

the image. This provides contrast for the next stage. 


Create background panels for the text with 
1 the Rectangle tool and change their Stroke to 
None. Use the Swatches palette to fill the lefthand 
panel with 100 per cent [Black] and the right-hand 
panel with [Paper]. Adjust the Transparency to reveal 
the underlying images — Multiply at 80 per cent and 
Screen at 75 per cent, for example. 


On the Text layer, put Before.doc and After.doc 
1 in different text frames. Format with Paragraph 
Style 02_Sub Heading. Change the Before text colour 
to [Paper] and fine-tune the panels’ opacities and 
Blending modes to maximise the text’s legibility. 


LOCAL AND 
GLOBAL CHANGES 


Changing a few select items on the 
master page can instantly transform 
the look of your document 1 


© Automatic Page Numbering 
TEES sare rage numbering at. 1 
Page Numbering Options 
Section Prefix zs 
Styie, © 1.2.3, 
‘Section Marker: SUMMEH 


1 In the Pages palette, double-click on page 1 to 

go to the beginning of the document. From the 
Pages palette menu, choose Numbering and Section 
Options. Ensure the Start Section option is on and, in 
the Section Marker Field, type ‘SUMMER’. Click OK to 
see the banner repeating across the spreads. 


1 If the text is ‘scrunched’, go to the master 
pages and remove section markers until it fits. 
As shown above, we could now quickly and easily 
update the gardening brochure for each season by 
just changing the section marker text as required. 


Now we'll change another master page 

1 item to globally change the document's 
appearance. First, though, choose Window>New 
Window to create a second view of the document. 
Now choose Window>Tile, followed by View>Fit 
Spread in Window for both windows. 


InDesign 2 


1 6: in one of the windows and double-click 

A-Master in the Pages palette. You'll now be 
able to immediately see how changing a master 
Page item affects the document itself. Try changing 
the master page's banner colour, for example. Close 
the ‘master’ window when done. 


In the document page, select and override 
1 master page items by Command+Shift- 
clicking with the Selection tool. Try this out on two 
or more of the triangles, noting that they now move 
to the top of the stacking order for their layer. Use 
Object>Arrange options to re-order as necessa ry. 


Detach Selection From Master 


ig v Keep Spread Together 
Allow Pages to Shuffle 


B Palette Options... 
ba «= Numbering & Section Options... 


‘Spread Flattening * 


Asmall but perfectly formed feature within 
1 InDesign is the ability to selectively return 
overridden items to master page items, without 
having to apply a master page to an entire page (or 
spread, for that matter). To do this, select the item in 
question and choose Remove Selected Local 
Override from the Pages palette menu. zs 


MISSING LINK 


The Links palette shows you the status of your 
linked files. A yellow warning triangle indicates 
that the original item has been modified ~ use 
Update Link to change in the document. A red 
circle indicates a broken link — use Relink to 
remedy the situation. Be wary of accidentally 
‘updating’ text links when opening a moved 
document and removing local formatting 
{using the Embed Files option from the Links 
palette menu is a good safeguard). 
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PART 5 BACK TO 
PHOTOSHOP 


Compromising over how images 
integrate within your layout is 
now a thing of the past 7 


2 2 The fringe has been removed, but now the 
flower has a harder edge akin to a clipping 
path. Again, choose Edit Original to return to the 
Photoshop document and click on the layer mask 
thumbnail. Choose Filter>Blur>Gaussian Blur to 
subtly feather the edge. Once you're happy with 
the results, save the document to update as before. 


1 9g Place the image Flower_masked.psd on page 
6. Alt-drag with the Pointer tool to create a 

montage. For aless regular ‘bunch’, use the Free 

Transform tool to rotate, scale and shear the blooms. 


2 5 Immediately choose Edit>Fade Spatter and 
Multiply by 30 per cent. Try out different 
combinations of opacity and Blending modes, taking 
snapshots of different states. In the History palette, 
double-click on each snapshot to name appropriately. 
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2 For ‘non-destructive’ effects, we can use Layer 

Effects and Styles. Select a flower and open in 
Photoshop. Click the Layer thumbnail, click the Layer 
2 As there's a distinct fringe to our flowers, we'll Style button and choose Bevel and Emboss>Texture. 


go back into Photoshop to tweak the mask Once more, save to see the changes in the layout. 
and close it up to the image (another method would 


be to adjust the alpha channel's Tolerance settings 
under Object>Clipping Path). Select an image and 
click the Edit Original button in the Links palette. 


2 Click on a Snapshot option, then save and 

return to the layout as before. As long as the 
Photoshop document remains open, you can move 
between the image and the layout, trying out different 
combinations of filters to see exactly how they'll 
appear in the InDesign document. 


Channel: Layer 0 Mask 


input Levels:[0 {60 [255 


2 You can also use the History palette to apply 
‘destructive’ filters ‘non-destructively’. In 

Photoshop, click the Create New Snapshot button 

in the History palette to preserve the current state. 


2 1 In the Layers palette, click the layer mask Apply a Filter such as Brush Strokes>Spatter and 
thumbnail. Choose Image>Adjustments> take another Snapshot, as shown. 


Levels and click Preview on. Drag the Input Midtones 
slider to the right to ‘choke’ the mask and remove 
the fringe. Click OK and Save. Click in the InDesign 
window to see the updated image. (You may need 

to update links with the Links palette.) 2 


If you need to keep the different ‘states’ after 
closing the Photoshop document, use the 
History palette’s Create Document From Current 
State button. In InDesign, use the Link palette’s Relink 
button to update the image in precisely the same 
position, with all transformations applied. 
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PREPARING 
TO PRINT 


We'll now make some final 
adjustments to ensure that 
the document prints correctly 3 


2 To ensure we've allocated enough bleed to all 
edges of our brochure (typically 3mm), we'll 
create guides for each edge of the first spread, using 
the Transform palette to ensure they're positioned 
correctly, adjusting images and text accordingly. 


Close Library 
Import Library Document... 


tte 
Place Item(s) 
Delete Item(s) 
Item Information... 


Show Subset... 
Show All 


v List View 
Thumbnail View 


¥ Object Library 


Sort Items 


2 Shift-click the guides with the Selection tool, 

choose Edit>Copy and go to the second 
spread. Choose Edit>Paste In Place to precisely place 
them in the same position (this invaluable feature 
also works for guides). You might also consider 
adding them to the library you created in the first 
part of the tutorial, as shown. 


TRANSPARENCY 

It can’t be stated too often: take care with 
output of areas of transparency (feathering, 
dropshadows, opacity) in your document - in 
particular, where they interact with text. It’s 
good working practice to place your text on 
its own separate topmost layer to keep it 
separate from the flattening process. 


3 When working with Transparency, it’s a good 

idea to ensure that all the text is on its own 
topmost layer. Alt-click the text layer in the Layers 
palette to show just that layer and check its content. 
Alt-click again to show all the layers. Move all missing 
text frames to the correct layer. 


3 To output as PDFs, go to File>Export and 

1 Save. Select Style [Press] and click Spreads 
on. Under Marks and Bleeds, turn on Crop, Bleed, 
Registration Marks and Page Information. Also enter 
a bleed value for each edge. To reuse this setup, 
choose Save Style and create a named PDF export 
style. Click Export to create the PDF. 
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InDesign 2 
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3 2 To supply native InDesign documents, 
fonts and images, choose File>Package, 
which offers a Preflight check as part of the process. 
Although /nDesign’s preflighting abilities aren't 
as powerful as, say, FlightCheck or PitStop, they 

will at least catch some gremlins. 
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3 If any problems are detected, go back to the 
original files and amend them before using 
Package again. Even if the printer/repro house prefers 
to work with native InDesign documents, it’s still often 
a good plan to include a PDF for reference purposes. 


FINAL STEP 


H ere’s the second spread of the brochure exported 
as a PDF with all printer's marks included. Clearly, 
InDesign can give you an edge in such brochure 
work, through its sophisticated feature-set and 
integration with Photoshop and Illustrator. And by 
taking the time to set up elements such as paragraph 
styles, master page items, swatches and libraries, 
you'll also be able to amend and update the 
document quickly and accurately. 


SUMMER SUMMER 
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PUBLISHING: Find out what's new in the much-anticipated 
upgrade of QuarkXPress with our expert tutorial and all-new 
interface guide. It’s too good to miss... 


| 
(XP 6maj 


round two years ago, Denver-based company 
A Quark demonstrated, for the first time, its 
flagship page-layout package running under 
Mac OS X. It’s been a long time for that promise of bigger 
and better things to be finally realised. To say that XPress 
6is much anticipated — by Mac and Windows users alike 
—is something of an understatement. 
The new release introduces some compelling 
concepts with regards the repurposing of content for 
the Web and parallel design for multiple publishing 
streams. It also, of course, brings the QuarkXPress 
package up-to-date with the OS X operating system 
(which many publishing houses have already and 
are now migrating to) and improves on key features 
added in the last two versions. 


Whether you're an experienced QuarkXPress user 
or a raw beginner, nothing beats a hands-on try-out, 
and that’s exactly what you get in this article. Over the 
next few pages this extended tutorial will get you up 
and running with the new features. These include Layer 
spaces, a colour-coded Layers palette, multiple undo, 
improved table handling, Hyperlink palette and a full 
resolution preview. All the while, we'll be preparing a 
document for print and for publishing on the Web. 

First, though, focus your eyes on the next page for 
a quick guide to the new, improved interface and the 
thinking behind the long-awaited upgrade. For more 
on this latest version, read our review online at 
www.computerarts.co.uk 


INFO Feature by Alistair Dabbs: ali@dabbsnet.com, 


. Look on your disc in 
the 2_quark_p92 
folder for the 

\—_” tutorial files 


XPRESS 6: AN OVERVIEW 


So what does version 6 have to offer? Read on and find out... 


QuarkXPress 6 is with us at last. And while the 
upgrade won't have its faithful users declaring a new 
bank holiday in its honour, there’s definitely 
something appealing about the app in its new guise, 
especially under Mac OS X. Some early buyers have 
compared it to putting on a pair of old shoes with a 
fresh insole and new laces: it's as good as new, but 
familiar and comfy with it. 

It’s plain that the most compelling new feature is 
‘layout spaces’. These make it possible to work on 
several associated design jobs within a single project 
file. As well as being convenient for managing 
themed copy in one place, layout spaces make it 
possible to share text content between designs, and 
have that text synchronised automatically throughout 
an entire project whenever it changes on just one 
layout. This also brings together the separate print 
and Web editing modes introduced in QuarkXPress 5. 

At the same time, Quark has been playing a game 
of catch-up with the rest of the graphics software 


The previous release of 
XPress included a basic 
Table tool, but in v6 
tables are more powerful, 
certainly more versatile, 
and thoroughly intuitive. 


If you thought the 
Hyperlinks palette 

was underwhelming 

in QuarkXPress 5, you'll 
find it much more 
functional in version 6, 
complete with simple 
anchoring and useful 
Page-to-page links. 


aia (olle@) 


4 bodytext 
A box text k 
A headline 


By synchronising a text 
story between two or 
more layout spaces in 
the same project file, 
you can be sure it 
always remains up-to- 
date no matter which 
instance is edited. 
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market, and not just with Adobe InDesign 2, either. 
Everyday features such as multiple Undos make their 
first-ever appearance in XPress 6, while layers, 
Hyperlinks and contextual menus have each 
undergone welcome revamps to bring them more 
into line. Yet when it comes to advanced graphic 
design and typography, Quark seems to have skirted 
the challenge somewhat. While InDesign 2 broke new 
ground, XPress 6 pretty much retreads the same old 
turf—albeit wearing its re-shined old shoes. 
Inevitably, expert user opinion on the upgrade is 
mixed. One of the more sensible comments came 
from Gene Gable, president of Seybold Seminars 
and Publications. Quoted at creativepro.com, Gable 
declared that while QuarkXPress 6 couldn't compete 
with InDesign 2 for functionality, “it’s premature to 
count it out.” For a multitude of reasons, from budget 
inertia to fear of the unknown, many print design 
professionals will almost certainly opt for the 
upgrade in spite of all their rancorous threats to ditch 
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Create several documents in 
one project file by working 
in various ‘layout spaces’. 
These layouts can be print 
or Web mode designs and 
are easily navigated using 
tabs at the bottom of the 
project window. 
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When you create a 
Web mode layout, 
this set of dedicated 
Web Tools opens in 
a separate palette 
alongside the main 
XPress tools. It 
includes button 
and form tools, 
image-mapping 
tools, and linking 
icons for rollovers. 


At last, Quark recognises 
that it’s possible to make 
more than one mistake at 
a time. The multiple Undo 
and Redo feature even 
provides a pop-up list of 
steps, so you can jump 
back and forth as needed. 


QuarkXpress 6 = a 


the package. The new release is considerably more 
demanding of hardware configuration and 
performance than previous versions, but habits die 
hard, and some users continue to feel the program is 
simpler and faster than the competition. “If! just want 
to crank out a job and not think about it,” says Gable, 
“| always turn back to XPress.” 

Another commentator in the US — who insisted 
on remaining anonymous, unfortunately — described 
the QuarkXPress character as being a little locked 
into its own thinking, rather than taking on board 
influences from the graphics industry and other 
design software: “ QuarkXPress is conservative 
and wishes it was the 1980s again.” The question 
Quark must ask itself, then, is whether it’s possible 
to be fashionably late when wearing a mullet and 
pixie boots... 

For a more complete roundup of what's new in 
QuarkXPress 6, read our review online. For now 
though, take a look at the new features in our tutorial. 


Actually introduced with 
XPress 5, the Layers palette 
facilitates convenient multi- 
layer design. In version 6, 
colour-coded icons show 
emphatically which items 
belong to which layer. 


Colours 


(7) B10 
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wr 
@ Magenta @ 
Red a 
@ Registration 
ky blue @ 
Web Aqua ic) 
Web Dark Green  @& k 
@ Web Fuchsia a= 
@ Web Grev New... 


Control-click or right-click Dipsenea tate a 7 


anywhere on a layout or aoe We aS 
within palettes to call up Make Process | 
extended ‘contextual la 


menus’. These save you 
time navigating menus 
or trying to remember 
keyboard shortcuts. 
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PART 1 DUAL 
LAYOUTS 


We show you the new app in action. 
If you don't have it, download the 
demo from www.quark.com 


In the Edit Colour dialog window which now 

appears, create a CMYK colour made up from 
85 per cent cyan and 30 per cent magenta. Name it 
‘sky blue’ and click on OK. 


Run XPress Gand press Command/Ctrl-N to call 

up the New Project dialog window. Select Print 
from the Layout Type pop-up and enter the settings 
shown here: A4 Letter, portrait orientation, Facing 
Pages and Automatic Text Box both unticked, 20mm 
left and right margin guides, 2 columns. Click OK. 
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Close the Page Layout palette by simply tapping 

the F10 key. Open the Layers palette from the 
Window menu. In any new layout space, there is 
just one Default layer. Now click on the New Layer 
button. It will automatically be named ‘Layer 1’ and 
given a reference colour of red. 


Apply this new colour to the large box you 
created on the page. Then, in the Colours palette, 
click on Solid and choose Linear Blend from the 
pop-up. Swivel the angle around to 270 degrees 
to produce the gradient you can see here. 
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If you've used XPress 4.x or 5 before, v6 should 

look immediately familiar. However, check out 
the new Window menu ~ this is where Quark has 
deposited all its floating palettes. From the Window 
menu, choose Show Page Layout. 


Click back on the Default layer. With the Rectangle 

Text Box tool, draw a large box across the top 
third of the entire spread, as shown. Control/right- 
click on the box to call up a context menu, click on 
Content, then choose None. 


Maw _ Uiiion Window Hale - po. 
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Using the Rectangle Picture Box tool, draw a 

short but wide picture box right across the 
bottom of the spread as shown. Click on the File 
menu and choose the Get Picture command. Now 
navigate to the tear.jpg image among the tutorial 
files on your cover DVD. 
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Currently, your layout has only one page. Let's 

change this. In the Page Layout palette, click on 
the ‘A-Master A’ master page icon and drag it into 
the main page layout panel. Drop it next to page 1 
in order to create a simple spread, as shown. 


Open the Colours palette from the Window 

menu. Ensure Background Colour is active in 
the palette, then Control/right-click anywhere in the 
colour list to call up a context menu. Click on New. 
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1 Click Open to place the image in the picture 

box and re-crop it as necessary to produce 
this torn-page illusion. Now select Layer 1 in the 
Layers palette and draw a new text box spanning 
two columns on the left-hand page. 


1 From the File menu, choose Get Text and 
locate the lorem ipsum.txt text file on the cover 

DVD. Click Open to bring it onto the page, 

and repeat to double it. Select All and change 

the font to Times and the point size to 10pt. 


1 1 Choose the Runaround command from the 

Item menu, and change the Type pop-up 
from Item to None. You'll need to repeat this action 
for each text box you create, unless it's already been 
set up as the program default. 


1 Draw a large picture box in the middle of the 

spread using the Rectangle Picture Box tool, 
choose Get Picture from the File menu and locate the 
car copy.jpg file on the DVD. By default, it appears 
with its embedded clipping path already active. 


1 Draw a second box and place it higher on the 

right-hand page. Link the two boxes by clicking 
in each of them with the Linking tool. Change the 
left-hand box to two columns by entering ‘2’ in the 
Cols field in the Measurements palette. 


From the Item menu, choose Runaround and 
1 change the Type pop-up from Item to Same 
As Clipping. Increase the outset from 1pt to 20pt in 
the field below and click OK. The text should now 
run around the car image. 


QuarkXpress 6 


1 Draw a smaller picture box on the right-hand 
page and use the Get Picture command 
again to place the blurry.jpg image from the DVD. 
Control/right-click on the picture and choose the Fit 
Box To Picture command from the Context menu. 


1 Draw a text box over the top of the ‘blurry’ 

picture and fill it with lorem ipsum.txt as 
before. Change the font to Arial. Highlight the first 
two words in the box, change their colour to red and 
increase their point size to 18pt. 


Click back on the ‘blurry’ picture box and 
1 apply the Duplicate command under the Item 
menu. Now empty the duplicated picture box using 
the Clear command under the Edit menu and fill it 
with 70 per cent black from the Modify dialog window 
(Item menu), as shown. 
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With this greyed picture box still selected, go 
1 straight to the Layers menu, click on the tiny 
dotted square next to Layer 1 and drag it down to the 
Default layer. This moves the selected object (the 
picture box) behind the Layer 1 objects. 


2 Switch to the Item tool, and Shift-click the 

greyed picture box, the ‘blurry’ picture box 
and the text box in front to select all three. Apply the 
Group command from the Item menu, then use the 
Rotation tool to give them a jaunty angle. 


2 Scroll your layout to one side so you can work 
on the pasteboard area. With the Table tool, 
draw a tall, thin box to match the height of the page, 
as shown. In the Table Properties box which appears, 
enter 16 Rows, 2 Columns, Picture Cells. 
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Click OK to create the table. Now move the 
cursor to the top of the first column until it 
changes to a downward arrow, and click to select the 
entire column. Hold down Shift and repeat for the 
other column. In the Colours palette, click on None. 
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Click in the top-left cell, hold down Shift and 
click in it again to select it. Keep the Shift key 
down and click in six more alternate cells to select 
them, as shown. In the Colours palette, click on White. 


>INSIGHT 


2 Select the other alternate cells in the same 

way, right to the bottom of the table, and fill 
these with Black from the Colours palette. Switch to 
the Item tool, press Command/Ctrl-M and select the 
Grid tab in the Modify dialog window. Now change 
the Width pop-up to Opt. 


25 It’s now possible for you to drag the checkered 
table onto your layout, as shown. At first, it 
appears on top of the car picture, so move it to the 
Default layer below using the same Layers palette 
technique explained in step 19. 


2 Finish off by adding a headline in its own text 

box at the top left of the spread. Now go to the 
Layout menu and select New. This time, choose Web 
from the Layout Type pop-up but leave the other 
default settings as they are. Click OK. 


>INSIGHT 


27 Clicking on the Layout tabs to navigate back 
and forth, use Copy and Paste functions with 
the Item tool to copy the tear and car pictures to the 
Web layout, then fit them as shown. Draw several 
text boxes and add a blank picture box. 


3 Time to change that headline. Here, we've 
exchanged ‘From here to eternity’ with 

‘Racing drivers go postal’. Switch back to your 

Print layout and you'll see that the changed headline 

has automatically synchronised here, too. 


0 maririo pesoiwi@ieieiesnie, 


28 Back in Print layout, open the Synchronised 
Text palette from the Window menu. Click in 
the headline box with the Content tool, then click on 
the Synchronise Text button to add it to the palette. 
Repeat with the box text and the body text. 
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3 1 Back in your Web layout, click on the empty 

picture box that we put behind the box text. 
Control/right-click to call up a context menu, drag 
down to 2-position Rollovers and choose the Create 
A2-position Target command. 


2 Go to your Web layout. Click in the text box at 

the top, then drag and drop the headline from 
Synchronised Text palette to it. Add the box text and 
body text to the other text boxes in the layout using 
the same technique. 


U 

32 Select the Rollover Linking tool from the 
Web Tools palette. Click once on the car 

picture, then once on the empty picture box to link 

them together. Now use the Get Picture command 

(in the File menu) to load the blurry.jpg image into 

the empty picture box. 
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3 Open the Hyperlinks palette from the Window 
menu and click on the New Hyperlink button. 

In the New Hyperlink dialog window, choose URL 

from the Type pop-up and enter a Web address in 

the field below. Click OK to finish. 


FINAL STEP 


lick on the HTML Preview button at the bottom 

of the Web layout window to preview this Web 
page in your default Web browser. Notice that the 
Car acts as a remote rollover, causing the ‘blurry’ 
background to appear, and as a Hyperlink to the URL 
you specified in the previous step. You've now 
created a conventional print spread, then quickly 
produced a Web layout version of the same content 
with the help of the Synchronised Text feature, 
complete with dynamic layer and button functions. 
It's a powerful way of producing near-simultaneous 
print and Web designs from the same source content, 
then ensuring they’re simultaneously up-to-date. C1] 
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GRAPHIC DESIGN 


DESIGNING 
A LOGO | 


A logo represents your business to the whole 
world so you'd better get it right. We show you 
the secrets of creating an effective brand... 


Your logo is likely to adorn your stationery, shop front, flyers, advertising materials and | 
a whole lot more depending upon the nature of your business. It should sum up your 
entire company and its ethos with a few words anda single image. Therefore, it pays 
to put in as much time and effort to designing it as you can possibly afford. | 

Brainstorming is a key ingredient of logo design. More brains are better than one. 
Over the next few pages we show you how to take your scribbled design from the | 
page and turn it into a marketable brand. Beginning with the best way to import your 
logo into /lustrator, we explain how to ensure it's in a usable format and has balance, 
how to create protection zones and more. It’s important that you get the most from 
your colours and you'll find the rules on using RGB, Pantones and CMYK, as well as 
which process your printer will prefer. Along with advice on shape and typefaces, 
and tips to help you make the most of Photoshop, we can help you create an image 
that’s truly eyecatching. 

Once you've created your brand, you need to consider your printing options, 
including image size, resolution and formats to whether it will work on everything 
from cups to menus to billboards. You'll find all you need to know on the following 
five pages. 

INFO Expertise provided by branding consultancy prevamp Itd. www.prevamp.co.uk 


ON THE DVD 
You'll find the components 
© you need to complete this 
tutorial on the cover DVD in 
the folder 2 logodes_p98. 


} 
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PART 1 CREATING 
AND DEVELOPING 
YOUR LOGO 


Turn your hand-drawn design into a 
usable digital image... / 


Brainstorming is an important part of any design 

process and should be constantly referred to 
throughout the project. Put pen to paper—a 
two-minute sketch can go a long way. 


Using Photoshop 7, we scanned our initial 

drawing to aid in the final creation of the tree 
symbol. A resolution of only 150dpi is required for 
output and, at this early stage, it is useful to remove 
any colour from the sketches. Scan your design as 
a bitmap or a grayscale image. 
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Create a new document with an art board size of 

150x100mm. Ensure that the file type is CMYK 
by using File>Document Colour. Import the sketch 
into /I//ustrator 10 using File>Place. To achieve better 
clarity of the sketch and to remove any links with 
image files, embed the image using the Link palette 
(use the drop down menu and select Embed Image). 


Focusing on the best of the drawings, enlarge 

and rotate the embedded Sketches layer to help 
in creating the final digital artwork. The document 
boundaries give you a good indication as to the size 
of the sketch. 


Go to the Layers palette and double click the 

layer that the sketch has been placed onto. 
Rename the layer ‘Sketch’. In the same box, click 
Template and Dim Images to 50 per cent. By clicking 
on the Lock Layer icon, the layer is protected and 
cannot be selected. 


The artwork is now a fixed template so another 
layer is required to work on. Use the Layers 
palette again and create a new layer called ‘2trees 
Symbol’. This is where we will begin to work on 
creating our logo. 


When transferring the logo from the pencil 

drawing to digital art, we used a sympathetic ‘2’ 
in a serif typeface (in this case Garamond) to form the 
tree trunk and branch. 


Zoom in and copy the numeral 2 by holding 

down Alt and convert it to an outline with 
Type>Create Outline. Using corner nodes around the 
shape, scale and rotate to align the number with the 
Sketch layer. Make the numeral 2 a stroke rather than 
a fill as this will assist in the next few steps, then 
convert it back. 


Now we need to clean the vector graphics. 

Remove and simplify parts of the 2 by selecting 
the Delete Point tool in the Tools palette and deleting 
unnecessary nodes to form the branches of the tree. 
The Direct Point tool will help with tweaking the 
final shape. 


1 Select the branch and use the Rotate tool on 

the central axis of the tree (Sketch). Next, hold 
down the Alt key to duplicate further branches and 
Command-D to repeat any actions. 


1 1 1Mirror the three branches with the Reflect 
tool, then fill them with black and remove the 
stroke colour. Delete the unnecessary lower branch. 


1 2 Now we need to make our artwork an outline. 

Select the remaining numeral 2 and convert it 
to outline. Hide the Sketch layer by clicking on the Eye 
icon in the Layers palette. 


1 Now we'll tweak the Mark. The logo may 
need horizontal and vertical adjustments 
using the Alignment options in the Object palette. 


* a, 
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Turn the logo upside down to check the 
1 Mark's balance. Remember, the logo will be 
applied to a variety of media and merchandise. 
Experiment with the rotation of the Mark. It may be 
required to work on cups and napkins from different 
angles. 


Creating several different sizes of the Mark 
1 will help you decide which sizes suit it best 
and will also give you an idea of the minimum size at 
which it can be reproduced. Print out a test sheet to 
give yourself a visual interpretation. 
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1 The Master symbol document should now be 
saved onto a 50x50mm document to 
eliminate any further confusion with older, previously 
worked Marks. It is a good idea to start building a 
brand ID as this will assist you in future work on the 
project. In this case, the file has been saved as 
twotrees.mark.master.K.eps. 


Protection Zone 


1 7 A protection zone around the symbol should 

be considered to protect the symbol from 
intruding or conflicting information such as other 
type or graphics. 


The inclusion of a Trademark, Copyright or 
1 Registered symbol should also be considered 
to ensure that your Mark is protected from 
plagiarism. Obtaining a symbol can be a long and 
costly process but it's very worthwhile. 
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PART 2 USING 
COLOUR, SHAPE 
AND TYPE 


Turn your hand-drawn design into a 
usable digital image... / 
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Now we need to create a colour guide. Open 

Illustrator file 2trees-Master.eps and create a 
series of 5cm boxes to contain your colour swatch, 
as shown above. 


Using Window>Swatch Libraries will bring up 

various industry colour swatches. Choose 
Pantone uncoated inks and select a blank (black) 
box and then choose colours. A personalised 
swatch library is created and the colours will also 
be imported into the default Swatch palette. We 
chose a limited palette of only three colours 
for our corporate swatch. 


We chose a standard Pantone Process Black, 

Pantone 357 (green) and a Special Pantone 119 
(gold). Tints were made in increments of 25 per cent 
to show a broader palette. 
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Colour pallet 


Begin to use the Tints palette to drop colour 
combinations into the Mark. 
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Finally, explore the range of tints and 
backgrounds the Mark can be placed upon. 


Now we need to build a library of symbols for 

your Brand ID. First, open a new 50x50mm 
(CMYK) file. Copy and paste the logo into the new file 
and save as a spot colour version of the logo 
twotrees.mark.master.spot.eps. Select All and open 
the Attribute palette. Output the selected artwork at 
900dpi. This will ensure that the Mark will always 
print with a smooth curve. 


Convert any spot colours to process by double 
clicking the colour indicated in the Swatch 
palette. Change Colour Type to Process and Colour 

Mode to CMYK. Repeat for all other colours. 


The next step is to build a brand ID by saving the 
Mark, indicating the version of the individual 
Mark as well as its CMYK breakdown. 


An optimised Web-ready file can be created for 

the Mark. Use File>Save for the Web to bring up 
an Enhancement palette option. The Mark can be 
manipulated to get the best from the graphic. 
Changing the quality will affect download time, 
indicated in the bottom left-hand corner of the 
window. Once the adjustments have been made to 
suit, click OK and save the file in the brand ID folder 
as twotrees.mark.web.rgb.eps. 


two trees ™ 


1 0 Now we need some text. Create a new file 

(50x50mm). Use a thin sans serif typeface 
(like Swiss721BT, above) for the name of the business 
and descriptor. The main focus in this case is the 
symbol and so you should be careful not to choose a 
type that is too overpowering. 


1 1 Get the text looking exactly how you want it 

by using the Character options. Click on 
Type>Character (Command-T) to adjust the kerning 
and leading of the typeface. 


1 Arranging the typeface left justified and 

placing it under the downward ‘2’ enhances 
the Mark and gives it pace, as well as giving the 
impression that the Mark is well rooted. Use the 
Paragraph palette (F10) to adjust the justification of 
the text. 


1 Save the file in the Master Logos folder as 

master/type history.eps. This is important as 
it will maintain the type style and information 
contained within the logo. Now make the type an 
outline to ensure the typeface doesn’t default. Save 
the outline file with an output resolution of 900dpi 
as before. 


1 4 Again, a protection zone around the complete 

symbol/name style should be considered 
now in order to protect the symbol from loss of 
impact from other type or graphics. 


1 Save a variety of symbol/type logos in RGB 
and CMYK formats as before, using the steps 
discussed in the Colours section. 


1 We've used a blockfoil technique to best 
enhance the Logo. A blockfoil is classed as a 
printer's finish and so is best illustrated on file artwork 
as a positional magenta screen only. Create a 
50x50mm empty box around the logo, Select All, 
then Copy. Remove the parts which will be foiled (the 
“coffee house” type and the second branch). Save as 
2trees/gfoildi/Sbranch.eps. 


1 cycle in reverse. Colour the single branch and 
the secondary type with 100 per cent magenta. Save 
as 2trees/gfoildi/1branch.eps. 


8 The two parts of the logo will be joined to 
1 form the complete 2 Trees logo ina 
QuarkXPress document. Creating the logo as two 
separate files within an empty box will ensure 
registration when the file is output for print. 
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PART 3 USING 
PHOTOSHOP 
TECHNIQUES 


Get creative with your logo and design 
atruly eyecatching image... 


Using Edit>Transform>Rotate, adjust the values The next step is to save our image. First, save a 
of the Mark to fit the perspective of the cup. version in psd format with layers, then flatten the 
Further perspective changes can be made using image and resave it as a .tif. 


Edit>Transform> Perspective. Adjust the nodes to 
give the Mark dimension. 


Ensure that the quality is good when selecting an 

image, and that any lighting, if required, is set up 
correctly. In this case, a digital camera was used at its 
highest image setting (3.3 megapixels). 


Select Image>Mode>Duotone and click on 
Pantone 357 in both swatches. Now save as a 
Select Layer>Layer Style>Bevel and Emboss. tif or an .eps file. 
From the open window, choose ‘Pillow Emboss’, 
‘Chisel soft’ and alter the depth of emboss, direction 
and angles until you have the style required. To blend 
the graphic into the image, add a little noise with 


Filter>Noise>Add Noise. This will give the graphic a F| NAL STE we 


less polished look. ow we'll create some drop shadows. Open 
2trees/cup/Grey.tif and make a clipping path 
around the cup using the Pen tools. Using the 
Paths palette, select the Work path and use the 
drop down menu to Make Selection. Deselect the 
Work path and cut it from the layer. Paste it onto 
a new layer and remove the background layer. 
Place a drop shadow by using Layer>Layer 
style>Drop shadow. Once a suitable shadow is cast, 
flatten the image and save as 2trees/cup/b&w.tif. 
Now it’s time to put the kettle on... 


Using Image>Mode>Grayscale in Photoshop 

will produce a black and white image. 
Adjustments can be made to the contrast of the 
image by using Image>Mode>Adjust>Curves. 


To further bed-in the Mark and extend the areas 

of chocolate topping around it, select the Clone 
brush from the Tools palette. Brush attributes, such as 
thickness and style, can be selected using the Brushes 
palette. In this case a splatter brush with a low opacity 
was chosen. Select the layer that the coffee cup sits 
on. Hold down Alt and select an area from which a 
sample is to be cloned. Begin to apply the clone to 
areas around the graphic edge. 


Open the //lustrator file 2trees-Master.eps and 

make the Mark white. Copy the logo. Revert to 
Photoshop and paste the Mark onto a second layer. 
Roughly size the image to fit and double click to place 
it on the layer. 
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INDESIGN 


Use the flexible and friendly Eyedropper tool 
in InDesign to save time and ensure consistent 
formatting across your documents 


nlike Photoshop and 
Illustrator, InDesign doesn't 
currently offer any ways to 
name and save formatting 
styles. However, there is a competent 
workaround. /nDesign’s highly versatile 
Eyedropper provides an excellent way 
to both save time and ensure consistent 
formatting of your documents. 

The technique we've shown you in 
our mini walkthrough below is for a 
one-off document. You might consider 
creating a variety of sample frames for 
effects such as Feather, Dropshadow 
and Transparency settings, putting 
them into a library and naming them 
accordingly. You can then easily drag 
out the required effect onto the 
pasteboard and use the method 
shown to apply it to a number of 
elements in the document. 

Effective as this technique is, it’s 
worth nothing that it will only work for 
spreads of pages at a time. There’s no 
way of changing a style to update all 


APPLYING A DROPSH 


With all objects deselected, click the tip of 
the Eyedropper on the edge of the frame from 
which the dropshadow is to be sampled. 


associated elements throughout a 
document -—using a plug-in such as 
SmartStyles from WoodWing Software 
will give more control. 

While we're on the subject of the 
Eyedropper tool, one area to highlight 
is its text formatting capabilities — in 
particular, the ability to apply OpenType 
typographical fine-tuning, such as All 
Small Caps. As with Adobe Illustrator, 
you can use the tool to click on and 
sample a text format (ensure the frame 
is de-selected to avoid the Fill Solid 
Black ‘feature’), then highlight the text 
to be formatted. Usefully, the standard 
selection shortcuts of double, treble 
and quadruple-click to select word, 
line and paragraph still apply. The 
normal route to the OpenType formats 
is via the Character palette menu, then 
across and down to the OpenType 
submenu to the chosen command. 
This can save either the hassle of 
setting up more Character Styles or 
some serious mousework. [_] 


ADOW TO MULTIPLE OBJECTS 


Click the loaded tip carefully on the edge of each 
frame that you want to format. The result is 
immediate, consistent dropshadows. 


EYEDROPPER TIPS 


Warning 


Image is a vector graphic. Eyedropper valves based 
on low resolution RGB proxy, 


To avoid CMYK images giving 

the error message shown above 
when attempting to sample colour 
values, steer clear of formats such 
as EPS or PDF. Try using TIFF, PSD, 
JPEG or SCITEX CT to obtain the 
correct values. 


To turn the Eyedropper 


temporarily back from Loaded 
to Sample mode at any stage, hold 


SHORTCUTS 


down the Alt key. To turn it back 
permanently, simply use the 
tool shortcut (I). 


If accidental formatting of your 

frames is getting the better of 
you, try using the Edit>Deselect All 
(Command+Shift+A) before using 
the Eyedropper tool. 


To copy paragraph attributes 
only in text, Shift-click with the 
Eyedropper before applying. 


Be even more specific about 

what to sample and apply 
by double-clicking the tool and 
choosing from Stroke, Fill, 
Character, Paragraph and 
Transparency settings. You could 
use this technique to change line 
styles and endings, for example, 
or for custom dash settings. 


An alternative method is to first select the frames 
to be shadowed, then carefully click the source 
frame. Voila! Dropshadows at the drop of a hat. 
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TYPOGRAPHY SEEMS TO 

BRING OUT THE EXTREMIST IN 
DESIGNERS, MANIFESTING ITSELF 

IN OBSESSIVE FONT HOARDING, 
CATALOGUE COLLECTING AND SERIF 
TWEAKING. WE TAKE A LOOK AT 

ITS PAST, PRESENT AND FUTURE, 
AND TALK TO THE TYPE DESIGNERS 
ABOUT WHY MODERN TYPOGRAPHY 
IS SOMETIMES NOTHING LESS THAN 
ALPHABETICAL PORN... 
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ELEPHANT BLACK 
Designed by Gareth Hague 
from Alias. Elephant was 
one of the first typefaces 
Hague designed, and it 
was created entirely on the 
computer. The lowercase 
g has become an icon 

for Alias. 

www.type.co.uk 


ABCDEFGH 
abcdefsh 


12345678 
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perhaps the hardest to master and the easiest to get 

wrong. With its own subset of terminologies and 
rules, many are tempted to gloss over the subject without 
taking the time to understand and absorb the nature of 
typefaces and their relationship to the page. The rise of the 
Internet has delivered its own challenges to the designer, 
and for a long time the Web has been perceived as a 
typographic wilderness. But technologies such as Flash 
and Cascading Style Sheets are providing the budding 
typographer with new and exciting avenues to explore. 


O fall the aspects of graphic design, typography is 


THE STORY OF O 


The dictionary definition of typography — this thing that 
drives designers to astounding degrees of obsessive activity 
—is the art and technique of printing with moveable type, 
which hints at its long tradition, starting from its invention 

in the 15th century. Up until the last century, individual 
characters were cast out of metal and were composed by 
hand in wooden or metal frames called gallies. As might 

be imagined, this was a far from perfect solution: it was 
laborious, and the typefaces themselves wore out with 
repeated use. 

At the beginning of the 20th century, new technologies 
began to revolutionise type composition, and there followed 
100 years of wild and frantic development, giving the 
designer unparalleled control over the written word. 

In America, two machines were in production by 1900, 
which automated much of the composition process: the 
Linotype system (invented by Ottmar Mergenthaler) and the 
Monotype system (invented by Tolbert Lanston). These hot 
metal machine-composing systems remained the standard 
for book, magazine and newspaper production until the 
invention of filmsetting. 

Filmsetting (or photocomposition) put fine control over 
type in the hands of the designer. The system used stored 
outline information for each character to output to film using 
cathode ray tubes or lasers, and enabled — for the first time — 
negative tracking and kerning to improve the appearance 
of paired characters such as To and Le. Characters could be 


overlapped and most amazingly of all, deformed and resized. 


Filmsetting still couldn’t give the designer instant 
feedback; we had to wait until the introduction of the PC for 
that revolution, and more specifically the Apple Mac. 


y EM IGRE www.emigre.com 


Together with Adobe PostScript (a page description 
language), PageMaker, and the LaserWriter which could 
output PostScript pages, the designer could see on screen 
what would be output to film and create proofs for client 
approval. It ushered in the modern age of typography, 
opening the floodgates for font compulsion and a fanatical 
eye for meticulously composed type. 


TYPOGRAPHIC PUNKS 


Where previous technologies had taken decades to establish 
themselves, the digital revolution took just a few years, and 
by the early 90s most designers were using computers as a 
compositional tool. In America, forward-thinking designers 
such as April Greiman, P Scott Makela and Barry Deck were 
torch bearers for the new freedoms computers afforded, 
while Vaughan Oliver, Peter Saville and Neville Brody were 
equally influential on this side of the Atlantic. 


Emigre helped to define contemporary typography, and was one of the first foundries to design for the modern PC 


Zuzana Licko - co-founder of 
Emigre - was born in Bratislava, 
Czechoslovakia, and moved to 
the United States at the age of 
seven. In 1981 she studied 
Graphic Communication at the 
University of California’s 
Berkeley campus. 

Zuzana explains how she 
started designing fonts: “My 
formal education was in graphic 
design, during which time | 
marvelled at typefaces. | realised 
the power that typefaces have 
on a typographic piece of design; 
how picking the appropriate 
typeface has a tremendous effect 
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on the resulting typography. 
Take a logo for example - often, 
the design of a few alphabetical 
characters will constitute the 
entire logo design.” 

Zuzana defends the need for 
new typefaces: “Design is about 
creating something new each 
time we approach a problem, 
even if it's the same problem. 
Over time, different solutions 
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changes and meaning shifts. 
The same old solution tends to 
become boring over time - the 
audience loses interest.” 
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Modern, geometric typefaces are the hallmark of The Identikal Corporation 
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Some of the most exciting type 
designs around are coming out 
of a small studio in Holloway 
Road, London. This is the base of 
Adam and Nick Hayes, identical 
twins and founders of The 
Identikal Corporation. Project- 
wise, Adam and Nick don’t just 
limit themselves to creating 
typefaces, or even design, but 
throw themselves into any 
creative endeavour, including 
moving image and music. 
Adam and Nick cite Morris 
Fuller Benton (1872-1948) as 
their inspiration. He designed 


many of today’s popular fonts 
such as Franklin Gothic, News 
Gothic and ITC Clearface. “He 
designed modern Sans Serif 
typefaces long before the Swiss, 
Germans and Dutch,” says Nick, 
“but he doesn't seem to get the 
respect he deserves.” 

For Adam and Nick, typefaces 
are personal expressions of 
their creators and the people 
who use them: “No two 
signatures are the same, each 
one is individual, and this is like 
typefaces. There will never be 
too many in existence.” 


One publication had a huge impact on modern 
typography, and mirrored the development of typefaces for 
the modern computer: Emigre (see boxout on opposite 
page). Started by husband and wife team Rudy VanderLans 
and Zuzana Licko in 1984 as a Californian lifestyle magazine, 
it changed in 1988 with issue 10, and quickly established 
itself as a cutting-edge design and type publication. 

Rudy VanderLans explains: “The Mac was creating 
tremendous havoc within the world of graphic design, 
typesetting and printing. It was turning everything upside 
down, and it seemed a very opportune time to concentrate 
on this phenomenon.” 

Zuzana Licko began designing typefaces for her computer 
and dot matrix printer, producing Emperor, Universal, 
Oakland and Emigre faces (now replaced by the Lo-Res 
family) which were bitmap-only typefaces corresponding 
to the pixel grid ofa monitor. As soon as the tools were 
available she began producing vector-based typefaces such 


as Matrix (1986), Dogma (1994) and Fairplex (2002), which 
are considered by many to be modern classics. Emigre is still 
a successful, independent type foundry. 

At the other end of the typographic spectrum were the 
visual experiments of David Carson, which gave birth to the 
trend for grunge typography in the mid 90s. Starting with the 
magazine Beach Culture in 1989 (which only lasted six issues 
before folding), and finding his ultimate expression with 
Raygun magazine in the early 90s, Carson challenged every 
preconception regarding print typography and magazine 
layout he could find. He set type upside down, overlapped 
text, ran stories from the middle of the magazine to the cover 
and famously set one story in Zapf Dingbats. Carson was 
hugely influential, and whatever the merits of his punk 
typography he widened the boundaries for designers and 
opened up a public debate about type and legibility. 

Another hugely influential type foundry was [T26], started 
by Carlos Segura in 1994. The early 90s were an energetic 
time for graphic design, as Carlos recalls: “There really was 
no singular place for a designer or client to go to in search 
of experimental or unique typography. The choices at that 
time were 1) draw it yourself, or 2) go on an extensive time- 
consuming search with no guarantee that you would find 
what you needed.” 


DAVID CARSON’S BEACH CULTURE GAVE 
BIRTH TO GRUNGE TYPOGRAPHY, FINDING 
ITS ULTIMATE EXPRESSION IN RAYGUN 


[T26] began to distinguish itself with an amazing array of 
high-quality typefaces, creative packaging and a strong 
brand. Innovations such as expanded licences, Internet sales 
and digital direct marketing saw the foundry become one of 
the best known in the world. 


BREEDING LIKE RABBITS 


There are now tens of thousands of fonts available to 
purchase and download from the Net, and the ease 

with which typefaces can now be created has helped the 
explosion. Early applications were mostly Mac-based, such 
as IkarusM (the Mac port of URW‘s Ikarus, which has now 
morphed into DTL FontMaster) and Letraset's FontStudio (no 
longer marketed). The most popular application for creating 
typefaces was Macromedia Fontographer. Strangely, it 


SUPERVIXEN 

Designed by Ben at 
Fontalicious. Fontalicious 
makes display typefaces 
which are organic and 
retro-modern. “| don’t really 
follow any guidelines when 
I'm designing a font. | prefer 
to just freestyle it.” 

www. fontalicious.com 


AGCUEe: 
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remains a popular choice, even though Macromedia 
hasn't upgraded it for six years and seems unlikely to do so. 
Craig Stainton from Selfbuildtype says: “Right now I’m 
joining the people who are calling for Fontographerto be 
made Open Source, so as to safeguard its future and aid 
future development.” 

Today the only real choice for the professional type 
designer wanting a modern application is FontLab, which 
is available for both Macs and PCs (including a recently 


SI > SAYING THERE’S NO NEED FOR NEW 
Revie vem TYPEFACES IS LIKE SAYING THERE’S 


NO NEED FOR NEW GRAPHIC DESIGN 


announced OS X version). Some type designers have 
lamented its steep learning curve, but for basic font editing 
FontLab has another product, TypeTool, which is designed 
to create typefaces quickly and easily. 

With so many typefaces available, what persuades type 
designers to continue creating new fonts? Mike Cina of 
We Work For Them (see the boxout on the opposite page) 
sums up the feelings of many type designers: “We have 
often heard from our contemporaries that there’s no need 
for new typefaces. That's like saying there’s no need for 
new graphic design. Design is heavily reliant on typography 
for communication and to set a mood and feeling. To leave 
this behind would be laughable. Saying that every possible 


Rhino. “For some years 
there was a marked 
preference for hi-tech 
fonts, but now the need 
for modern interpretations 
of old classic text fonts is 
getting bigger.” 

www. garagefonts.com 
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solution has been explored is simply wrong.” 


WHAT INSPIRES A FONT? 


As you might imagine, the inspiration behind typeface 
designs is as interesting and assorted as the designers 


visual impact, found objects or textures, and folk art. 


Zuzana Licko from Emigre falls into the practical camp — 


and when we say practical, we mean driven by design 
concerns of aesthetics and functionality. “Most of my 
inspiration comes from the particular medium that I’m 
involved with at the time,” Zuzana explains. “I search out 


a problem that needs to be addressed or a unique result that 


a production method can yield. 


“More recently, my interest in creating somewhat more 


traditional text faces was a result of Emigre magazine's 
increased publishing of in-depth articles, which requires 


themselves; typographers, it seems, are driven to shape their 
fonts by things as varied as catchy words, practical issues of 


fonts appropriate for lengthy text setting. My Baskerville 
revival, named Mrs Eaves, presented me with the 
opportunity to design some fanciful ligatures which help 
create visual interest and are reminiscent of customised 
lettering.” You'll find back issue of this collectable title at 
www.emigre.com. 

Similarly, Joe Gillespie from Minifonts says his font 
designs were born out of necessity: “Printer fonts just don’t 
work well on computer screens at small sizes, so | simply 
had to create ones that do.” 

For other designers, the reasons are more esoteric. 
Eduardo Recife from Misprinted Type feels his inspiration 
can be found on the streets: “Old rusty signs, street 
typography, scratched letters...” This seems to echo the way 
that artist and graphic designer Ed Fella captured the folk art 
of hand-drawn lettering from across America. 

For idiosyncratic reasoning, though, you'd be hard- 
pressed to beat Ben from Fontalicious: “Every once ina 
while I'll hear a word that sounds like a really punchy name 


PH O NT www.pixelsurgeon.com 


Phont is the type foundry from Pixelsurgeon co-creator, Jason Arber 


Like many other type designers, 
Jason Arber began creating 
typefaces because he couldn’t 
find exactly what he was after. 
“| began to experiment with 
Fontographer, which for 
someone new to type design 

is a pretty complex, daunting 
application. It’s probably the first 
time I've ever read the manual 
for an app!” 

Jason explains the process 
of designing a typeface: “I very 
rarely draw the glyphs on paper 
-lusually have an idea in my 
mind of what the shape and feel 
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of the alphabet should look like, 
so | dive straight into Mlustrator. 
From there I'll design a few key 

characters to see if the typeface 


=== ABCDEFGHUIF 


for a while. I'll revisit the design, 
make tweaks, and then once 
I'm happy, build the entire set 
of glyphs in /Mlustrator. From 
here I'll copy and paste into 
Fontographer and begin the 
laborious process of adjusting 
and kerning the typeface. 
EvilType, one of my most 
popular fonts, took three 
months to kern.” 


OcdeFghijkin 
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Mike Cina has created cool typefaces for Chank, Test Pilot Collective, and now We Work For Them 


ABCDEFGHIJIKLMNMOPRC seceteedens 
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Weey2 


countless Web designers with 


their manic graphics, slow- 
burning Flash movies and 


it's impossible to tell where 
one Mike ends and another 
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philosophy behind WWFT: 


because a project calls for 


WE VVORK FOR TH EM www.weworkforthem.com www.youworkforthem.com 


chaos-out-of-order abstractions. 
Together, as We Work For Them, 
they have fused their creative 
energies into a single vision - 


“We usually create typefaces 


something singular, or we have 
a good idea for a font that isn’t 
out there. When working on 
projects or trademarks we will 
hand-draw type if a unique look 
or feel is needed. We rarely use 
pre-made type on anything if 
we can help it. If a client needs a 
unique look or feel, this is one of 
the best ways to set them apart 
from the rest.” 

The Mikes have recently 
started selling their fonts 
through We Work For Them’s 
twisted sister Website, You Work 
For Them. 


for a font, and Ill create a font simply for that word.” So you 
get fonts with names such as Supervixen. 


FONT PIRACY 


Although producing a typeface can be achieved very quickly, 
designing a font is a time-intensive process, as Mike Cina 
explains. “Revisions take months, because it's important to 
let the typeface rest and revisit it to see the errors fully.” 

The biggest problem, however, comes from the Internet, 
which has been a double-edged sword for type designers. 
On the one hand, it’s a godsend for foundries wanting to 
distribute their faces worldwide, as they can be emailed and 
downloaded quickly and easily, even on slow modems. The 
flipside, is that it’s spawned an epidemic of font piracy, to 
the point where it’s not even perceived as a moral crime by 
most people. 

Many type designers feel that the issue is one of 
education, as Stefan Hattenbach of Garage Fonts (see the 


Stalemate boxout on the opposite page) explains. “I think the 
best way to fight piracy is to inform more about all the work 
behind a typeface. People in general don’t want to ‘steal’ 
from a single person.” This view is echoed by Mike Cina: 
“When pirating fonts you're really hurting the little guys, not 
the big corporations that are more well established.” 

Part of the problem might be asserting ownership over the 
typeface. “One of the frustrations is that credits for typefaces 
are usually missing from design pieces,” explains Zuzana 
Licko. “While a design project usually credits the work of the 
graphic designers, art directors, photographers, illustrators 
and even printers, seldom are the fonts or type designers 
mentioned, although the typeface(s) used may constitute a 
great portion of the resulting work.” 

The Internet has also contributed to typography in 
unexpected ways. Anyone who regularly searched the 
Internet looking for cool and interesting sites cannot fail to 
have noticed the trend for ‘pixel fonts’: typefaces devoid of 
anti-aliasing, designed to be read on screen. Joe Gillespie 
from Minifonts describes how pixel fonts have their own set 
of rules, which are different from printer fonts: “You have to 
avoid any letterform that fights with the medium —a square 
grid —and anything that is not a horizontal or vertical stroke 
generally does. You can get away with strokes at 45 degrees, 
but any other angle is nasty.” 


FAST FORWARD 


After grunge type, techno faces and pixel fonts, where is 
typography heading now? Type is often a barometer of our 
times, and befitting a slightly conservative period in history, 
typography has become less exuberant, more concerned 
with clean lines and proportion. Favourites such as DIN 
Mittelschrift complement modern faces like Maetl from 
WWEFT and Monark from Identikal. There's also a renewed 
interest in revisiting designs, with new interpretations of serif 
fonts such as Mrs Eaves and Filosofia from Emigre and the 
playful retro aesthetic of House Industries. 

Despite a lack of decent software and the threat of font 
piracy, font designers and lovers of type are as busy, 
diligent, engrossed and categorically assured as ever. 
As Mary-Anne King from Garage Fonts says, “There are 
NEVER enough typefaces.” [| 


INFO Words supplied by typographer, designer and co-founder of Pixelsurgeon, Jason 
Arber - see the boxout on Phont, page 110. You can email him at jason@pixelsurgeon.com 


GARDEN PARTY 

Designed by Ronna Penner 
from Typadelic Fonts. 
Typadelic was borne out 

of Ronna’s frustration at 
trying to find good-quality, 
casual typefaces. “| felt my 
unique style of fonts might 
filla need.” 
www.typadelic.com 


ABCDEFG 
abedefghijk 


Creative Collection 2003 | 111 


TYPOGRAPHY 


CREATE 
YOUR OWN 
TYPEFACE 


FontLabis a font creation and 
editing tool that provides all the 
power you need to build a new 
typeface from scratch... 


There are thousands of typefaces in existence, but 
sometimes a designer still can’t find what he or she is 
looking for and instead cracks open a type design 
application to crank out a new font. 

Creating typefaces isn’t easy, and designers have been 
hampered by a lack of modern software. The industry 
standard, Macromedia Fontographer, hasn't been 
upgraded since 1996, and many designers have 
discovered that by upgrading their operating systems to 
Windows 2000, ME, XP or Macintosh OS X, Fontographer 
finally shows its age and stops working correctly, if at all. 

Although Macromedia has gamely posted a couple of 
workarounds on its site, many designers will be looking 
around for a new application to replace its ageing copy of 
Fontographer, and alternatives are thin on the ground. 
The only real option for the serious type designer is 
FontLab, which has been attempting to wrestle the type 
creation crown from Fontographer for the last few years. 
Because FontLab has an active development cycle, it 
works perfectly in a modern Windows environment. 
Additionally, it supports Macintosh OS X, which also 
brings a degree of parity between the two platforms. 


INFO Words and expertise by Jason Arber, jason@pixelsurgeon.com 


ON THE DVD 
~~~. The files needed to 
© ) support this tutorial 
/ can be found in the 
2. fontlab_p112 
folder on the coverdisc. 
You'll also find the finished 
Dstruktonaut font on the DVD. 


If you've experimented with 
Fontographer previously, FontLab’s 
interface will seem immediately 
familiar to you: opening an existing 
font or selecting New from the File 
menu brings up a character grid 
containing cells for all the glyphs in 
the chosen character set, including 
punctuation, accents and special 
characters. Double-clicking on a cell 
opens up a new glyph-editing mini- 


window, where character outlines can 
be created or modified using 
FontLab’s vector paint tools. 

Kerning enables you to create 
tighter built-in relationships between 
pairs of glyphs, such as To and Ve, 
which can improve the appearance of 
the typeface. Metrics are simply the 
defined border widths for each 
character, and FontLab has a 
combined Metrics and Kerning 


window, enabling you to toggle 
between these two attributes 

in order to make fine adjustments 
to your font. 

Usefully, FontLabalso includes a 
Preview window , so you can see 
the effect your changes to the 
character shape, metrics or kerning 
are having ona string of text. That 
kind of live feedback on the colour 
and appearance of your font is 


FontLab 7a & 


invaluable, and makes using FontLab 
a much more intuitive experience. 

That said, the app is densely- 
featured, so expect a steep learning 
curve. Explaining all of its features 
is probably beyond the capacity of 
a single tutorial, but if you’re 
switching from Fontographer or are 
new to type design and eager to 
discover more, you should learn 
enough to get started. 


TOP 10 FONTLAB TIPS 


Inspiration for typefaces can come from all 
1 around you. American type designer Ed Fella 

was inspired by the naive, handwritten signs 
that dotted America in the late twentieth century. 
House Industries takes its inspiration from cheesy 
early ‘60s culture, while T-26 was inspired by the 
broken-up text from a fax machine to create its 
Digital Decay font. 


how many typefaces are considered modern, 

but were in fact designed over a hundred years 
ago. Franklin Gothic, a mainstay of many magazines 
and annual reports, was actually designed in 1902 by 
the talented typographer Morris Fuller Benton. 


2 Read the history of type design. It's surprising 


letters. A good way to get started is to create a 

pi font, or picture font, which could contain 
simple streamlined images. Perhaps if you use a lot 
of logos in your work, you could build a typeface 
containing them in order to keep your logos in one 
handy place. 


3 Typefaces don’t have to be based on Roman 


mathematical lines and curves, so unless your 


Get used to Bézier curves. Fonts are based on 
i font is going to be made up of straight lines, 


you'll need to understand how to build characters 
using the fewest control points possible. ///ustrator, 
FreeHand, CorelDRAW and FontLab all share the 
same basic method of creating curved paths by 
clicking and dragging with the Pen tool; it’s easy once 
you get used to it. 


existing typeface designs without the express 
permission of the copyright holder. While all 
font editors allow you to open up existing fonts, 
you should not use these as the basis for your own 
designs. As well as being illegal, it’s just bad Karma. 


% Respect designers’ copyright. Don’t copy 


designing your typefaces directly on the 

computer screen, it's often a good idea to 
start with a pencil and some paper. Ideas can be 
expressed quickly and the end results can be 
scanned in and traced in a vector application or 
used as a template in FontLab or Fontographer. 


5 Although there’s nothing wrong with 


and attention to detail. The process can be 

laborious, so if patience isn’t your virtue, you 
might be better off with a different creative discipline, 
such as fire-breathing or chainsaw juggling. 


7 Creating typefaces requires perseverance 


while creating. Typeface design is subject to 

the same whims of fashion that influence 
other areas of design. In the past, we’ve seen grunge 
type, hybrid fonts (for example, where Futura and 
Bodoni are mashed together to create Max Kisman’s 
FF Fudoni) and pixel fonts. 


3 Be aware of the current typographic zeitgeist 


that old chestnut. Try not to use all the fonts 

in your collection on one page, as the results 
are generally not as impressive as you might 
imagine. It’s usually best to use one typeface for 
headlines and another for the body copy. Try to 
avoid using display fonts for your body copy as 
this is often difficult to read. 


You can build a typeface using nothing but 
10% but using other apps can make your 

life easier. You might prefer to use Adobe 
Illustrator, Macromedia FreeHand or CorelDRAWto 
design your fonts and then import them into a font 
editor — most font editors enable you to import EPS 
files or even paste vectors into empty cells. 
Photoshop is great for tidying up scans or applying 
filters, and Adobe Streamline is handy for converting 
your scanned images into vectors. 


9 Know the rules before you break them. Yes, 
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3 Untitled-1 : A[65] 


Canon Rowwlas 


BD (E..F -H JK 


‘There tne hewrieg defined tr is pas 


FontLab 4.5 has a new properties area in the Metrics window. 
It also has new Metrics, Kerning and Preview dialog boxes. 


READ OUR OTHER 
Lerrersenies ARTICLES 
Lotter A 


The Letter L 


By Allan Haley 


Select «letter to 
view purchase font 


Kieopat 
‘s9peer in both rulers! names —P T OL E— were instrumental in 
hlerogtyphics 


‘So where did this useful L originate? The Egyptian equivalent of our L was first 
represented ‘toe 


Sp Soc DAT 
It helps to be familiar with the history and the rules of 
typography before you starting creating your own font. 


[Tal : 


You can design your typeface directly on screen if you like, 
but we recommend planning on paper beforehand. 
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PART 1 DESIGNING 
YOUR TYPEFACE 


Use good old-fashioned pen and 
paper to sketch out your ideas, then 
refine them using /I/ustrator... J 


Use the Round Corners filter again to curve the 7 Not all characters can be created from the simple 
bowl. You'll need to use asmaller radius than the parts already created, so don't be afraid to create 
larger outer shape or the curve will look slightly odd. new glyphs in the same style as the lowercase ‘a’. You 


can flip and rotate these new characters as well, using 
the Rotate and Reflect tools from the toolbar. 


The hardest part of creating a new font is coming 

up with a fresh idea that will work consistently 
across all the characters in an alphabet. Sketching a 
few ideas on paper can save you time later and will 
give you some immediate visual feedback on how 
your idea might work. In this case, we're going to 
extrapolate from a simple lowercase ‘a’. 


PSPC PFO PITEPORBR§ CTIEME hd COOBLT FOGON RENE 


Experiment with your design until you find the 
best shape. It's easy to see how you can quickly 


and easily create new characters (or glyphs) by When creating glyphs, there will be times when 
removing, rotating and flipping the component you're faced with multiple, acceptable solutions 
parts. In this case, we've created a lowercase ‘r’ to certain characters. In this situation, choose the 
from the outer curve of the lowercase ‘a’. character that suits the typeface as a whole, rather 


than decide on the character in isolation. 


Scan in your sketches (or use sketch.tif from 

the DVD) and import into ///ustrator. On a new 
layer, create a white square using the Rectangle 
tool and set the Transparency to 50 per cent using 
the Transparency palette. Create a third layer and 
use the Rectangle tool with a stroke and no fill to 
establish the character's general proportions. 


Add simple elements to the basic shapes to build 2a. Le. aE omamtis mass 
new glyphs. With the Pen tool, draw a straight Once you're happy with your complete alphabet, 


vertical line (hold down Shift to constrain the angle). you'll need to expand the strokes to outlines 
Use the Direct Selection Arrow (white arrow) to Shift- (Object>Path>Outline Stroke) and remove overlaps 
select the top control points on the bow! of the ‘a’ and by Option-clicking Add to shape area from the 

drag vertically (again holding down the Shift key to Pathfinder palette. This is an important step. 
constrain the direction). Create a lowercase ‘d’ by Otherwise, your fonts won't look as expected 
combining the elongated bowl with the vertical line. when imported into FontLab. 


Use Illustrator's built-in Round Corners filter 

(Filter>Round Corners) to create a generic ‘o’ 
shape that will be used to create many of the curved 
lines needed for the typeface. Make a copy of the 
generic ‘o’ and keep this on one side. To create the 
‘a’ character, slice up the original with the Knife tool 
and use the Pen tool to add the a’s bowl. 
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PART 2 FIRST STEPS 
IN FONTLAB 


Before you can start playing around 
with your typeface, you need to set 
preferences and import vectors... J 


10 On opening FontLab and selecting New from 
the File menu, you're presented with a cell 
matrix containing all the possible glyphs from the 
particular character set you've chosen. The default 
character set is fine for our purposes, but FontLab 
also supports double-byte character sets such as 
Japanese, Chinese and Korean. In fact, FontLab 
supports any Unicode character set, which is handy. 


ome 
fp Crom vote 
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There’s a bunch of info about your typeface 
1 that FontLab would like, and it’s best to get this 
out of the way now. Select Font Info... from the File 
menu and the first section is simple enough: deciding 
what to call your font. Keep an eye out for the little 
emerald icon —clicking on that will automatically fill in 
some fields for you, which can be a great timesaver. 


It's hugely important to assert your copyright 
1 over any original designs you may do, and 
typefaces are no exception. From the Copyright 
information menu in the Font Info window, fill in the 
appropriate information. Remember: don’t copy 
anyone else’s designs! 


oer toms mae 
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1 AWindows-only feature is deciding what 
privileges to allow the user of your typeface. 
You can allow them to do what they like with the 
font or be as draconian as allowing them only to 
view and print documents created using your font. 


1 Even if your plan is to give your font away, 

it's usually a good idea to establish what the 
licence agreement should be, even if it’s as simple 
as forbidding the end user to re-sell the font or 
include it in a type collection. You can include a link 
toa more in-depth licence agreement. 


Many of the Font Info settings are beyond the 
1 scope of this tutorial. In most cases, it’s fine to 
accept the default setting or use the little emerald icon 
to automatically fill in fields. FontLab has a manual 
that explains the settings in greater detail, and we'd 
recommend taking the time to read through it. 


1 To get your design into FontLab, you need 

to save off each glyph as an individual EPS. 
Save as a version 7 EPS (or earlier) because FontLab, 
like Fontographer, can be thrown by the additional 
information contained in later EPS versions. 
There’s no need to save an instance of each 
accented character, such as 4 and é. Just the accents 
themselves will do, because these can be married to 
the appropriate glyph in FontLab (as you'll see later). 


Back in FontLab, double-click a cell to open 
1 7 that cell’s Glyph window. This is where the 
individual characters and symbols are imported, 
created and edited. In the background is a rough 
bitmap representation of the glyph. The various 
horizontal lines include the baseline, the cap height, 
the x height and where the descenders end (for 
example, the tail on a lowercase ‘p’). The font’s 
width is also represented vertically. All these settings 
can be adjusted in the Font Info window. 


Select Glyph>Import from EPS... to import 
1 your EPS into the Glyph window. The co- 
ordinates for the control points and various other 
visual data can be turned off by deselecting the 
various options in the View>Show Layers menu. 
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PART 3 TAKING 
THINGS FURTHER 


The real work starts here: using 
backgrounds, components, and 
automatically adjusting your 
typeface’s metrics and kerning... 1 


1 Should you be so inclined, you can sidestep 

Illustrator and import your scans directly into 
FontLab for tracing by hand. It’s a good idea to use 
Photoshop to improve the contrast, clean up any 
distracting smudges and to straighten the baseline if 
the type was scanned at a slight angle. FontLab only 
accepts 1 bit TIFFs or PICTs, so convert your graphics 
to bitmap (Image>Mode). If you're in RGB or CMYK 
mode, you'll need to step down to greyscale before 
you can convert to bitmap. 


Multiple Master 
‘Assign Mask... 


| ert Fens 
External Tools 
| Customize... 


| Remove Background “CHR 


2 Imported bitmaps are called Backgrounds and 
are placed in the Glyph window by copy and 
pasting from Photoshop or other image editors. 
Alternatively, they can be placed by choosing 
Tools>Templates>Open Background. To see your 
Background bitmap, you'll need to make sure that 
Templates are visible in the Layers floating palette. 


> INSIGHT 
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2 Click on the bitmap B icon palette, then 
position and scale the imported bitmap. 
Click on the Bitmap OK button once you're satisfied. 


22 Click on the bitmap B icon palette. Use the Pen 
tool from the toolbox at the top of the window 
to trace around the bitmap. Use FontAudit from the 
View>Show Layers menu to warn you of mistakes. 


2 Remember, you only need to import or draw 

one instance of an accent. Two or more 
Component glyphs can be married in a cell and if the 
source glyph is modified, the appearance is updated 
in all the Component instances of that glyph. 


2 To create an ‘a’, you can combine two glyphs 

as Components. From the Glyph menu, select 
Add Component and type ‘a’ in the Name begins... 
field. With the ‘a’ glyph highlighted, click OK. Repeat 
the process, type ‘acute’ in the field and hit OK. 


2 Time to check the Preview pane, which shows 
live updates of your font’s progress. So far, 

so good, but the widths of the characters and their 

relationships to each other seem out of kilter. In the 

example above, the space on either side of the ‘f’ 

glyph looks too wide, which could be solved with 

some adjustments to the font’s kerning and metrics. 
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You want to generate metrics for: (All characters in current string a) 
‘How much white space do you want to leave around glyphs? 
(can BR costo arcs Hef00—] iifo0—} 
‘When do you want wo keep existing metrics? 

(Wren mes wi dite nt more than WB) {TT} 


‘How much must the shape of glyphs inflate to generate metrics? 


mt) 2 


2 Put simply, Metrics is control of the white 

space surrounding a character and defines the 
width a glyph occupies. FontLab has an option to 
analyse the font using an internal algorithm and 
apply metrics automatically (Window> New Metrics 
Windowsclick the emerald icon). However, doing it 
by hand often generates better results. 


-——4 Vou want to generate kerning for: [All pairs in the currents. 1) 


How much white space do you want 10 leave between glyphs? 
(canon BB) custom: (15) 
When do you want to beep existing kerning? 

10 jx 


Allow tor positive kerning 
Maximum number of pairs te generate: "1024 ) 


Minimum absolute valve for generated kerning: 10 | 


cm) 


27 Similarly, FontLab can automatically generate 
kerning pairs. Kerning is finely adjusting the 
distance between two glyphs so they are more 
harmonious and visually pleasing. There is great 

skill in successfully kerning a font, but FontLab, as 
with the Metrics, has an automatic option (in the 
Preview/Metrics window click the K button and then 
click the emerald icon). Again, manual kerning often 
produces a more professional set of kerning pairs. 


PART 4 KERNING 


Manually kerning your typeface is 
always the better option... 1 
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2 Check out the results of automatic kerning and 
metrics in the Preview/Metrics window. The 
rows of figures at the top show the overall width, 
left/right sidebearing and the blue strip shows the 
kerning value between the pairs of characters on 
screen. Note ‘f’ kerning could use some fine-tuning. 
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2 Rather than manually adjusting every 
combination, we can create groups of glyphs 
whose kerning values can be shared. FontLab calls 
these groups Classes. To create these, open the 
Classes window (Window>Collection/Classes Panel). 


_ Font = Dstruhtonau Regular [OM WAN Users Jason Desktop OSTRUKTONAUT dstrttonaut 
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Click the new document icon and drag 
3 instances of the ‘f’ character into the top pane. 
In the lower pane, the Class should be named, 
beginning with an underscore. Click the green tick 
button to apply your changes and save the Class. 
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3 1 Create a new Class by clicking the new 

document icon again. From the glyph matrix, 
drag all instances of glyphs that share characteristics 
of a lowercase ‘c’ as we'll be adjusting the 
relationship between ‘f’ and ‘c’ (and similar) pairs. 
Name and save the Class. 


OpenType Kerning Assistance 


fc fc fo fo fe fe fg 


Kerning: -80 
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3 Using the OpenType Kerning Assistance 

window (Tools>Kerning Assistance...), 
decide which classes are Left Classes and which 
are Right Classes. Click Save. 
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3 Back in the metrics window, type in the main 

identifier glyphs, then press the K to make 
sure you're adjusting the kerning, not the metrics. 
You'll notice that there are now little arrows below 
the glyphs; these enable you to select which class 
you want in the situation where a single glyph may 
be included in different classes. 


3 To save a Macintosh PostScript version of 
your font (the preferred format for Macs) 

select File>Generate Mac Suitcase... You will see a 

named suitcase that contains your font. Clicking 

the options button enables you a few export choices. 

The default choices can be kept. Although you 

don't strictly need PFM or AFM files, it's a good 

idea to include them with your font. 
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3 To save a PC TrueType font (the preferred 
5 format for the Windows platform), select 
File>Generate Font... making sure you select PC 
TrueType from the Format menu. Accept the 
default options and click Save. 
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3 Test your new typeface by dropping it into 

your Home\Library\Fonts folder in OSX — 
there's nothing quite like having your new creation 
appear in the font menu. You'll probably still need to 
tweak elements of your typeface. There are also 
many more areas of FontLab that can be explored, 
so you can always go back and experiment. 
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CHAPTER 3 


THE SECRETS 
OF SUCCESSFUL 4% 


WEB DESIGN 


TUTORIALS 


VECTOR DRAWING IN 
FLASH MX 


Create a zoomable map for your site 
with the vector drawing and Trace too 


FLASH MX 
NAVIGATION 132 


Get to grips with timeline and gavigation 


tools as we create an interactive comic 
FLASH MX 

ANIMATION 138 
Animate a credit sequ: fora Web 

cartoon using the aniffration tools in Flash 


CREATING THE PAGES 1438 


Convert your Website's designs in Photoshop 
tonew HTML pages in Dreamweaver 


FLASH MX FOR 
ARTISTS 


Follow this great guide to-using.the 
illustration tools in Flash MX 
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FEATURES | 
ULTIMATE WEB DESIGN 120 


40 hot tips from the world’s top Web designers 
on howto make your Websites rock 


ONLINE PORTFOLIOS 144 


Websites can make or break you — how to 
perfect your online presence 


SHORTCUTS 


One-page tutorials to refresh your skills 


DREAMWEAVER 


Why tables are better than layers 


131 
Let your user choose your site's design 1 37 
143 


Keep control of your pop-up windows 1 59 


147 
| 
’ 


Designing effective layout tables 


FLASH 


Using bitmap images in Flash 


ILLUSTRATION BY MAGICTORCH 
www.magictorch.com 
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LESS RAIN: GRAPHICS 


A decent site relies on well-prepared and well-chosen graphical 
content, nota showy mish-mash of Flash and Shockwave effects 


(www.lessrain.com) has made a name for itself 

producing striking and original content that features 
truly exciting imagery. We caught up with MD Vassilios 
Alexiou, Technical-Directors Thomas Meyer and Gordon 
Milwood, Creative Director/MD Lars Eberle and Creative 
Director Carsten Schneider to get a company-wide view on 
Less Rain’s approach to graphics and static images. 

Meyer is first to share his views on how and when static 
imagery is at its best on the Web. “Obviously, static content 
can only be effective if you don’t need to deliver up-to-date 
information, which is quite rare these days,” he says. 
“There are many ways to ‘shape’ static content in order 
to make it look dynamic, create a sense of space and 
generate excitement.” He is quick to add that purely static 
sites do not last—for obvious reasons, companies do not 
want sites that cannot be easily updated. 

In the last decade, the issue of colour on the Web has 
been a much-debated topic. According to Vassilios Alexiou, 
in Less Rain’s eyes, the Web safe colour palette is as good 
as dead. “Most of our target audience use 16-bit colour or 
more, so Web safe colours are not an issue, no matter what 
technology you develop in.” Milwood intervenes: “Web 
safe colours are extremely 1984.” 

Less Rain combines vector and bitmap imagery, using as 
much of the available space to create a certain atmosphere, 
as Schneider explains: “The balance between the two varies 
from project to project, as we take into account not only the 
expected user bandwidth but also the ‘value’ a certain visual 
style or interactive element might have for the whole user 
experience; the more important an elementis, the longer 
the user is prepared to wait for it.” In addition, he tells us 
that the best way to get images for your site is to take them 
yourself —the company never uses stock imagery. 

Finally, Alexiou reveals what he 
believes will be a core prerequisite 
for future designers eager to use 
graphics on the Web. “Core skills 
for all creative people are very 
much alike,” he says. “A painter, 

a programmer and a musician go 
through similar thinking processes 
when they’re creating something for 
themselves or an audience. A very 
interesting reference for this is 

Brian Eno’s ‘Oblique Strategies’. 
Designers are not artists, of course - 
a designer needs to define a tighter 
set of principles: ‘When do | consider 
my work finished?’ ‘How important 
is it that the client likes it?’ ‘How can 

| communicate my ideas more 
effectively?’ As soon as you start 
answering questions like this, 
you're on the right track.” 


B erlin and London-based agency Less Rain 


Less Rain: “There are many ways to shape static content to make it look dynamic.” 


BIOGRAPHY ; 


Less Rain is a creative new media 
agency based in London and 
Berlin. Founded in 1997 by 
Vassilios Alexiou and Lars Eberle, 
Less Rain has quickly established 
an outstanding portfolio. Clients 
include Red Bull, Nike, Scottish 
Courage and Mitsubishi. 

Recent projects include 
www.vandalsquad.com, 
www.becksfutures.co.uk, 
www.redbullbikebattle.co.uk 

and www.i-shake-u.com. 

The broader network of Less 
Rain consists of over 30 members, 
encompassing designers, 
programmers, illustrators, 
sound engineers, photographers, 
architects and artists. 


Creative Director 
Carsten Schneider 


FAVOURITE SITES 
www.wecomeinpeace.free.fr 

Lars Eberle: “| love this site. It’s 
warm, unique in style and 
extremely funny to watch. It makes 
you feel the human wit behind 
these characters and creates a nice 
contrast to all these over-designed 
designer and illustrator sites.” 


www.trevorvanmeter.com/flyguy 
Vassilios Alexiou: “I just wish | 
could exist in this world forever. It's 
so simple, yet so beautifully crafted 
and full of emotion. | think it has 
touched a lot of people and it’s 
pointing the way forwards.” 
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SPECIALMOVES: 
ANIMATION 


The use of animation on the Web is pretty run-of-the-mill now, 
so how do you make your creations stand out from the crowd? 


The highly interactive extravaganza that is specialmoves’ www.shipoffools.com/theark. 


BIOGRAPHY 


specialmoves is an interactive 
media agency based in London 
that specialises in creating 
cutting-edge interactive content 
for the Internet and new media 
channels. Its clients are drawn 
from a range of sectors, including 
media and entertainment. The 
company has won many awards, 
and commendations for its 2002 


' a | work for the online side of MTV's 
es hit show At Home With The 
, 4 Osbournes. Other clients include 


Channel 4, Independiente, 
Founder Mark Knopfler, VW and Ship 
Darrell Wilkins of Fools —The Ark. 


FAVOURITE SITES 


google.com 
“It answers every argument.” 


psyop.tv 
“The coolest TV graphics.” 


linkdup.com 
“What the best are up to.” 


o! eople are still making the 
- assumption that because 
you put something on 
the Web, then it’s interactive,” 
explains Darrell Wilkins, 
founder and partner at 
specialmoves. “There is some 
fantastic linear animation out 
there, but it still misses the 
great opportunities that the 
Web offers us.” His point is a 
simple one — always ensure 
your animated content takes 
advantage of what the Web is 
at its best —a truly interactive 
experience. 
As a company, London- 
based specialmoves thrives on 
the user experience when deciding upon animated content — 
and Wilkins believes that interactive animation is animation 
at its most effective on the Web. “Animation comes in many 
forms,” he continues. “As an interactive agency rather than 
a Web design agency, we feel that the best work comes 
when the useris influencing it rather than just looking at it. 
It's harderto create, but more rewarding for the user.” 

The company’s latest project exemplifies this particularly 
well. The Ark (www.shipoffools.com/theark) is a Shockwave 
Big Brother-esque extravaganza, only the likes of Jade ‘I 
ain’t a minger’ Goody are replaced by Noah and Samson — 
aboard the Ark. The project brings together superb 3D 
animation with user interaction and, best of all, an original 
idea. The same goes for the now famous The Osbournes 
site, developed for MTV (www. mtv.co.uk/theosbournes). 

Within these projects, specialmoves has implemented 3D 
environments that cleverly draw the user in — it’s a technique 
Wilkins is sure we'll see more of in the future. “3D on the 
Web is going to be massively important over the next couple 
of years, especially in the entertainment field,” he enthuses. 
“Will it revolutionise Web animation? No, | don’t think it will. 
Like all animation, it’s easy to do, but very hard to do well. 
Interactive 3D is harder still. The important thing is that you 
use the appropriate type or style of animation, depending on 
your project. Just because an animation is 3D doesn’t 
necessarily make it appropriate.” 

Ideas not software are the vital ingredient. “The best tools 
are those that help you realise your ideas,” explains Wilkins. 
“Their feature-sets don’t matter. People are too hung up on 
which tools to use and not concentrating on the ideas.” 

Wilkins’ final piece of advice points towards keeping 
animated content appropriate — doing things for the sake 
of it may look pretty but the user experience remains key to 
the design process. “Too many times sites are spoilt by 
designers’ wet dreams,” he says. “This has been bad for the 
Web in general, and it devalues the animator’s work. Often 
their animations are excellent, just inappropriate.” 


MIRAMEDIA: 
BACK-END 


& DATABASES 


Dynamic sites make it a cinch to update your content — so don’t let 
database-driven projects intimidate you. Miramedia is here to help 


Websites from day one. According to Dominic 
Johnson, founder of the company, database 

content has the following advantages: it’s quick and simple 
to update, youcan radically change the style of your site 
without upsetting its content, and by using a database to 
store and deliver data, you can pipe the same material 
through on the Web, kiosk, mobile phone or PDA. 

With this in mind, we asked how Miramedia approaches 
a project — does the demands of the content dictate the 
technology or vice versa? “We deal with marketing 
departments who have no interest in the technology we 
use for the back-end,” explains Johnson. “They’re buying a 
black box solution and all they care about is that it works 
and is secure. I'd say we dictate the technology based on 
Our past experience and code modules. We've adopted a 
kind of object-orientated approach, building up an 
application with a series of modules and post-test existing 
code. Most Web development isn’t rocket science and 
there’s a huge crossover between applications and sites.” 

Bringing together both designers and developers, the 
process demands compromise at every turn. “A developer's 
job is to make the database layer as transparent as possible 
and deliver a site that looks identical to the way that the 
designer intended,” explains Johnson. “Both parties have 
to work together, so, of course, there will be an element of 
compromise. The result has to be a system that works well, 
looks good and, most importantly, can be delivered to 
budget. It’s a compromise because we all have to turn a 
profit. Separating the programming code and the rendering 
HTML is the easiest way to keep both parties happy.” 

Johnson’s advice to those wanting 
to progress in the world of 
database development is two- 
fold: “Technically, learn 
XML/XSLT, so your designs 
can integrate with any 
database structure. There's no 


Mi iramedia has been working with database-driven 
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BIOGRAPHY 


Miramedia is an interactive agency 
for the exhibition industry. Formed 
in 1999 as a Web design agency 
working for the likes of Sony, 
Merrill Lynch, Harvey Nash and BP, 
it decided to specialise in exhibition 
Websites in 2001. It recently 
launched an Online Exhibition and 
continues to develop upwards of 
25 event sites per year for Imark 
Communications, The Motor Cycle 
Show and Spanish Tourist Board. 


Founder 
Dominic Johnson 


FAVOURITE SITES 
www.sydneyoperahouse.com 
Dominic Johnson: “While we 
were researching 3D environments 
for our online event, Softworld 
Accounting & Finance Online, we 
came across the Sydney Opera 
House Website. The virtual tour is 
absolutely excellent. It’s a fantastic 
example of what's possible.” 
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The Web is full of people that 
can do alittle bit of this anda 
little bit of that.” 
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Miramedia’s work for Accounting & Finance Online boasts an excellent 3D environment. 


JUXT INTERACTIVE: 
NAVIGATION 


Good navigation is vital for a satisfying user experience but it's 
often overlooked in the rush to provide exciting creative content 


Refine your navigation design to ensure the user's experience is as effortless as possible. 


Creative Director 
Todd Purgason 


BIOGRAPHY 

Todd Purgason is the Creative 
Director for Juxt Interactive, a 
California-based Web design 
studio that specialises in Internet 
strategy and interactive design. 
Purgason has led Juxt in creating 
innovative work for such clients 
as VW, Sketchers, Billabong, 
Macromedia, Kawasaki, Reef, 
Red Bull, Sam Adams, Shimano, 
Sci-Fi Channel, Toyo Tires, Bandi 
and many others. (You'lHfind a 
full profile of Juxt inissue 76 of 
Computer Arts.) 


FAVOURITE SITES 
http://wellvetted.com 

Todd Purgason: “Sites like 
Newsday and Surfstation are 
good, but there's a lot of 
information and random links. 
For me, however, this content 
is noise I'd like filtered out. 
Wellvetted gets a great group 
of well-vetted members of the 
global design community to give 
just one link for the month. The 
result is a concise list of great 
links that have been filtered 
down to the most noteworthy.” 


si avigation should 
N establish itself, tell you 
where you are, where 
you have been and where you 
have to go,” enthuses Todd 
Purgason, Creative Director at 
Juxt Interactive. “It shouldn't 
change in the middle of the 
experience — and, if atall 
possible, it should always be 
in a consistent location. These 
are rules, and rules are good 
guidelines, but sometimes 
you also need to learn when 
to bend or break the rules.” 
Purgason certainly knows 
what he’s talking about — after 
all, the navigational device 
you use.on your site will 
ultimately determine its 
functionality and the way your users experience the site. It’s 
notoriously easy to get carried away with creative ideas and 
forget about the reason your site exists. Purgason at Juxt 
gives some insightful comments into the most common 
navigational mistakes. “Content is often structured in a way 
that is easy to organise on paper — without considering how 
the user will be stepping through the content,” he explains. 
But this modus operandi can lead to serious navigational 
problems. “You have to think through how users will be 
using the site — not necessarily which container you put a 
certain piece of content in. Otherwise, you end up creating a 
tedious and frustrating experience for the user.” 

It’s obviously a fine balance creating navigation that is 
interactive and original, yet usable at the same time. Often 
creative ideas get in the way of solid navigation, as 
Purgason explains: “I think one problem in the struggle to 
create something original is that many people quickly turn 
to the obtuse or abstract. Unfortunately, when it comes to 
navigation, obtuse and abstract are usually going to work 
against you, not for you. Navigation needs to be clear and 
concise and easy to use for the impatient Web audience.” 

But such a method doesn’t preclude sparkling originality 
or clever thinking. “It just means you need to think more 
and work harder on the solution,” says Purgason. “It’s also 
important to know who you are designing the navigation 
for. If the site is a designer's portfolio, for example, you're 
going to have a great deal more creative freedom than a 
commercial site. But being a creative director that sees 
countless resumés and portfolio sites when looking for 
talent, I’ve often looked at sites that | just couldn't figure out 
how to use, and simply moved on to the next candidate. 
Creative directors are busy people that do not like to have 
their time wasted, which is a good thing to remember about 
not just me, but most Web users.” 
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VECTOR GRAPHICS 


VECTOR DRAWING 
IN FLASH MX 


Part one in our three-part series explores Flash 
MX's core tools — namely its drawing features — 
and reveals how to create a zoomable Web map 


Despite the best efforts of the marketing 
people at Macromedia, Flash is still most 
famous for its animation capabilities. 

But such a reputation does it a disservice, 
because in Flash MX we have a package 
that can do so much more. It’s a fully- 
fledged Web authoring system, complete 
with its own programming language and 
database connection capabilities. In this 
three-part series, we'll explore the key 
features, concentrating in this first section 
on the program's excellent drawing tools. 

Vector graphics lie at the heart of Flash. 
Although it’s grown into a multimedia 
tool that supports bitmap images, 
video and sound, vector images are 
the glue that holds these cumbersome 
components together. While bitmap 
images are made up of individual pixels, 
each one requiring its own entry in the 
data file that describes it, vector images 
are made up of co-ordinates. Think of 
them as points on a grid, describing 
shapes, lines and fills. As a consequence, 
vector images are smaller in file size, can 
be scaled to any dimension, and they 
don't suffer from the same loss of quality 
that plagues optimised bitmaps. 

There are other vector formats on the 
Web - but the fact that they’re not in 
regular use is testimony to Flash’s 
popularity. The World Wide Web 
consortium is trying to pioneer the SVG 
(Scalable Vector Graphic) format—a 
dynamic graphics language created in 
XML. The format has many interesting 
features and is supported in ///ustrator, 
CorelDRAW and FreeHand, but like Flash 
it requires a plug-in to function. WebCGM 
(Computer Graphics Metaformat) is a 
subset of SVG that can be viewed directly 
in current versions of Internet Explorer. 

Despite these ‘official’ standards, Flash 
is the only vector format to have had any 
real impact on the Web. Part of it could be 
down to player distribution; around 98 
per cent of browsers have the Flash plug- 
in. On the other hand, it could be down to 
Flash's great toolset — a handy bunch of 
widgets that enable you to create images 
with the smallest number of points. 

Flash MX has all the tools you'd expect 
from a professional-level vector drawing 


package, including freehand and Bézier 
editing features. But it wasn’t always that 
way. Until quite recently, the program 
featured a reduced drawing toolset that 
gave the illusion of reduced functionality. 
In fact, Flash’s unique approach to vector 
illustration is flexible and produces files 
with far fewer points than ‘traditional’ 
tools. Drawing and editing lines, curves 
and fills is easy with the simple, context- 
sensitive tools available. 

Over the next few pages, we take you 
on a tour of Flash’s drawing complement, 
as we complete a project in Flash. The 
brief is to create a zoomable street map. 
Our tutorial is structured so that you can 
create a map of any place you like. We 
simply outline an approach to the task 
and provide you with some suitable 
techniques to follow. Using vector 
graphics in Flash will enable you to make 
artwork that is resolution-independent, 
and that you can transfer to the Web 
without any loss in quality. 


INFO Tutorial by Karl Hodge, khodge@spodgod.com. 
Thanks to Time Out magazine (www.timeout.com) for 


permission to use its map for the purposes of this tutorial. 


ON THE DVD 
~~~ Look on your 
coverdisc for the 
( @ ) folder named 
—__~ 3_flash1_p126, 
where you'll find the files you 
need to follow this section. 
These are for personal training 
use only, and are not to 
be used commercially or 
reproduced elsewhere. 


Rob Collinet uses Flash to develop illustrations with a retro 
feel. His site currently includes example artwork and Flash 
games. His work's easy to find at www.robcollinet.com. 


Team Artonomy creates its impressive vector artwork in 
Ilustrator, but when designs are destined for the Web, 
the results are often imported into Flash by its clients. 
Find out more at www.team-artonomy.com. 


Someone has to create backgrounds for all those Web 
animations, and at www.urbanentertainment.com, it’s 
Sylvia Cziglenyi. Her portfolio site at www.sylviac.com 
lets you get a look at the original artwork for classics 
such as Undercover Brother. 
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Though he boasts mainstream clients such as Time 
Magazine and the Discovery Channel, Jack Mortensback 
fuses his Flash illustration with trippy, hippy vibes. Check 
out his portfolio at www..illoboy.com. 
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Web design 


PART 1 

LINE DRAWING 

Flash gives you a flexible set of line 
drawing tools to choose from J 


We're drawing a street map, and although there 

are several ways to convert the data into a vector 
format in Flash, the easiest is to start with a bitmap 
image of the map you want to convert. In our case, 
we used a scan of a street map-— this one has been 
used with the kind permission of Time Out magazine, 
the arts and entertainment weekly. For more info, see 
www.timeout.com. Please obtain permission of the 
copyright holder if you are going to use a scanned-in 
map — otherwise, draw your own. 


LRP Yn hn MIe nmin 


Create a new document in Flash and set the 

size of the movie to the same size as the bitmap 
image — 700x700 pixels is probably about right. 
Import the map image to the stage and use the 
Align panel (Window>Align) to centre it. Click the 
Insert>Layer button on the timeline. 


Double-click on the new Layer 2 label and name it 

‘Streets’. Double-click the Layer 1 label and name 
it ‘bitmap’. Select the layer labelled Streets. Now 
manually trace the bitmap image using Flash’s tools. 
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>INSIGHT 


Flash gives you a number of different ways to 
draw lines—and lines are what we need to 
trace our complicated street map. For most drawing 
package aficionados, the Pen tool will be the obvious 
first choice. Bring it up from the Too! palette. 


alternatives to manipulate lines, alternatives that 
make the Pen tool seem positively cumbersome. 
For straight lines, it’s best to go for the Line tool — 
switch on Snap To Objects from the View menu to 
join consecutive lines. Use the Properties panel to set 
the Stroke height to 2 pixels and the type to Solid. 


In our example, we've used the Line tool to trace 

over a series of streets with a straight grid 
structure. When drawing in straight lines, don’t worry 
about overlapping. We'll show you how to clean up 
loose ends with Flash in a moment. 


For curved areas, we've used two different 

techniques. The Pen tool comes in handy for 
meandering lines. Select the Pen and place a start 
point, then place a second point at the end of the 
curve, holding down the left mouse button. 
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Move the mouse to adjust the curve of the line 

until it fits. When you're done, release the mouse 
button and click on the last point you placed to 
deselect it. Click the final point a second time if you 
wish to continue drawing from that point. 


The more ‘traditional’ way to create curves in 


Flash is to draw a straight line between two points 


of a curve, then switch to the Arrow tool. Hover the 
cursor near the line and the arrow switches to the 
curve adjustment icon. Click and drag to change the 
straight line to a curve. 


PART 
VECT OR EDITING 


It’s not all points and Bézier handles 
in Flash. You can edit shapes and 
lines in a more intuitive way 7, 


As you trace your map, the Pen and Line tools 
1 will be your obvious first choices, but did you 
know Flash also features a Pencil tool that you can 
use for drawing freehand lines? Handily, the app 
cleans up these lines on the fly. 


1 In the Options panel, choose either Smooth, 
1 Straighten or Ink to set the drawing mode. 
Ink simply anti-aliases the line you draw, Smooth 
reduces the number and complexity of curves in 
your line, while Straighten speaks for itself. 


1 Whichever method you use to trace or 

draw your lines, they always remain editable, 
either directly or via adjustments that you make in 
the Properties panel. The method of editing you 
choose is entirely independent of the tool used to 
create the original line. 


1 3 For example, you can manipulate a curve 
drawn with the Pen tool using the curve | 

adjustment features of the Arrow tool. Similarly, if 

you select the Subselection tool, click on any line and | 

you can individually move and edit anchor points, 

whether they were created by the Pen or Line tool. 


1 4 Using the Arrow tool, you can also adjust the 
length of single lines or edit corners. Hover the 

Arrow tool over a corner or the end of a line until the 

cursor icon changes, then click and drag to adjust. 


a 


BRUSH TOOL 


Although we don’t use the Brush tool in this _ 
project, it can be handy. Essentially, it enables _ 
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1 5 One important thing to keep in mind as you 
trace over the streets in your street map is not 
to leave gaps. In the next steps, we'll be filling in the 
traced areas with colour. In our example, we ‘closed 
off’ streets that continued ‘off the edge’ of the map. 


1 When you've finished tracing the outlines of 

your street map, lock the layer containing the 
original bitmap, switch its visibility off and select the 
layer with your newly traced map. 


1 Select the Paint Bucket tool and choose a 

colour for the streets in your map from the 
palette. We've noticed through experimentation that 
Flashis better at filling in less complex shapes created 
with lines than larger or more complex areas. 
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Click within the lines you've drawn to start 
1 8 filling the ‘streets’ with colour. If it doesn’t 
appear to work, try ‘closing off’ smaller areas, 
drawing single lines to seal any open shapes. 
Continue in this way until all the streets are filled. 
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PART 3 
ADVANCED FILLS 


Next, use a splash of colour to 
bring your line art to life 
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1 Switch to the Arrow tool. Earlier, we stated that 

you could easily clean up overlapping lines in 
Flash. Using the Arrow tool, you should be able to 
select any overlaps and simply delete them. In this 
way, you Can tidy up edges, remove lines used in the 
filling process and clean up the street ‘grid’. 
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2 You can use the Eraser tool to delete line 

sections that you can't select with a single 
click. Alternatively, use the Marquee or Lasso tools 
to make a selection, then hit the Delete key. 
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2 Our example map includes vector artwork 
representing a train. We created this in a 
similar way to the map. After importing a bitmap 
image of a train into Flash, we then traced over the 
subject's edges with the Pen and Line tools. You'll 
find the original image (train.bmp) on the DVD. 


z a 1 4. 


2 When filling the shapes within the train, we 

used a series of gradient fills. Select the Paint 
Bucket to begin with, then open the Colour Mixer 
panel (Window>Colour Mixer). Choose Linear from 
the dropdown menu in this panel. 


2 Atwo-colour, black-to-white linear gradient 

is created by default. Click either colour to 
select, then edit it using any of the various methods 
available in the colour mixer. Use the Paint Bucket to 
fill an area with the gradient. 


2 4 You can alter the orientation, centre-point and 

dimensions of the gradient fill using Fill 
Transform. Select the tool, then click on the filled area 
you wish to edit. The cursor changes as you select the 
rotate or scale handle of the gradient selection. 


FINAL STEP 


D elete the bitmap image from your file before 
publishing. Our finished map used almost every 
tool in the Flash drawing toolbox, from Line to simple 
shape-creation tools, and many, as shown, are 
interchangeable. The secret is to use functions that 
you feel most comfortable with. 


DREAMWEAVER 


Creating page layouts in Dreamweaver can be 


a complicated process for inexperienced users. 


Without a reasonable understanding of how 
such elements are created, many opt for the 
freedom of layers, but, as we explain here, 
there are other, far more reliable methods. 


USING LAYOUT VIEW 


mb 


SHORTCUTS 


he latter part of HTML stands for 
Mark-up Language, which refers 
to the code developed to make 
basic text formatting changes 
(emboldening characters, for instance). It 
was never intended to be a method for 
managing complex page layouts. But with 
the development of browser standards 
and increasing user expectations, 
elements such as tables (introduced for 
displaying information in a tablature 
format) quickly became used to plug the 
gaps found within HTML's limitations. 
Thanks to apps such as Dreamweaver, a 
new generation of Web designers are now 


Commands Site Window Heip 


Standard View ea gy leces 
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Create a new page and access the Layout tab contained 

on the Insert bar. Choosing this option brings the 
Layout Table and Layout Cell tools into action. Select the 
Layout Table tool, then create your containing table. 


Turn on your rulers and use the anchor points to resize 

if necessary. Then, with the Layout Cell selected, draw 
the shapes for your primary cells within your Layout Table, 
again resizing where necessary with the anchor points. 
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Note how new Layout Cells conveniently snap to 
existing row or column boundaries This helps to 
maintain perfect alignment, as well as provide the most 

efficient code for the final table. 


With the basic layout completed, you can fill the cells. 

Now revert to the Layout tab’s Standard View option 
to convert your page into an HTML table with improved 
support across multiple browsers and platforms. 


quite happy to create complex content 
with only a basic understanding of what's 
going on at the source code level. For 
many, the development of page layouts is 
made easier thanks to more flexible layers. 
Layers are increasingly being used to 
determine the layout of a page. They offer 
a great way of assigning areas of content 
that you can freely move around. Tables, 
onthe other hand, require forward- 
planning to determine the required rows 
and columns and their defining attributes. 

Layers effectively provide micro-pages 
embedded into your main document. But 
while you can leave a page as layers, this 
can present rendering inconsistencies, 
because different browsers and platforms 
interpret differently how the page is built. 
An example of problematic behaviour is 
overlapping layers — particular care must 
be paid to the stacking in order to render 
a page successfully. 

Tables, on the other hand, are better 
established and therefore more reliable. 
You still need to be aware of how content 
defines the final results, though. For 
example, the width attribute to a column 
is fairly consistent, but determining the 
height of a cell or rowis still best defined 
by embedded images. 

That said, there’s nothing wrong with 
mocking up a page layout using layers 
and converting it into tables afterwards. 
To achieve this, use Modify>Convert> 
Layers To Tables, but be wary of avoiding 
the aforementioned overlapping issue. 

An alternative approach is to use 
Layout View. Here, Dreamweaver offers 
a kind of halfway house. When working 
ona new page, access the Layout tab of 
the Insert bar to move into Layout View. In 
this mode, you can draw the approximate 
range of the main table using the Layout 
Table tool and easily resize using provided 
anchor points. You then add Layout Cells 
using the corresponding option in the 
Layout tab. Dreamweaver now 
automatically generates a table to suit. 
From here, just continue to add,resize 
and move cells about until you're satisfied 
with the results, then move back into 
Standard View to have Dreamweaver 
automatically create the necessary 
HTML table. 

This method enables you to plana 
more universal table layout than the 
layer approach, as well as move content 
around more freely. 
INFO Expertise supplied by Chris Schmidt, 


chris@track5.co.uk 
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ILLUSTRATION BY WEWORKFORTHEM 
www.weworkforthem.com 
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WEB NAVIGATION 


FLASH MX IN DEPTH 


In part two of our detailed exploration of the 
Flash MX toolset, we explore fundamental 
features of the app’s powerful timeline as 
we set out to create an interactive comic 


The Flashtimeline is a masterpiece of 
interface design. Once a simplified take 
on the timeline in Macromedia Director, 
its expression in Flash MX is now just as 
feature-rich and powerful. 

The shift towards object orientation 
kickstarted in Flash 4helped that 
evolution a great deal. In earlier versions, 
almost all the program's interaction and 
animation capabilities were tied up in the 
timeline. Recent improvements to 
ActionScript and Movie Clips have taken 
away that emphasis, but this doesn’t 
mean the timeline is no longer important. 
In fact, it’s still a central element in the 
Flash interface, and knowing how to 
use it well is an essential skill, whether 
you're creating sites in Flash or using it 
for animation. 

Animation and interaction in Flash 
begins with the timeline, whether you're 
using it on the main stage, editing the 
timeline for a movie clip or tackling the 
reduced version found in Button 
Symbols. The program's strength is that 
you can create individual frames that 
contain any of the elements supported 
by Flash, from vector artwork to video. 
Keyframes are frames that enable you 
to define changes in animation or the 
content of a frame. The frames between 
one keyframe and another then display 
the content defined in the previous one. 

In turn, each frame can be composed 
of a number of independent layers. One 
layer may run unchanged over several 
frames, while others may have a different 
set of elements in each frame. The 
timeline enables you to have any number 
of layers you wish, too. To help cope with 
this flexibility, a number of features 
enable you to organise the timeline. 
Name and colour-code individual layers 
so you can track them more easily, for 
instance, as well as group layers in 
folders, using whatever criteria you like. 

The timeline’s main function is to 
control playback of these frames over 
time. You can use ActionScript 
embedded in keyframes within the 
timeline to control this, or you can 
reference frames within the timeline from 
other objects. For example, a button may 


be programmed to send the movie to a 
numbered or labelled frame. When left 
unfettered, a movie will play back on 
screen at the set number of frames per 
second specified within the Document 
Properties dialog. 

In this tutorial, we're going to create a 
simple, interactive project that will take 
you through every major function of the 
timeline. We'll be creating an interactive 
comic in a slideshow format that includes 
persistent frames, the use of keyframes, 
frame labels and ActionScript. The 
project will be controlled by navigation 
buttons that take users to labelled 
sections of the timeline, and will also 
require some organisation of layer 
elements. We've provided all the artwork 
for you as a library full of symbols that 
you can drag and drop directly to the 
stage. You'll be able to concentrate on 
working through the main features of 
the timeline, picking up secrets, hints and 
tips along the way. 

INFO Words and Flash expertise by Karl Hodge, 
khodge@spodgod.com. Wild For Adventure comic 


strip artwork by John Broadley (broadl.j@virgin.net) 
- used with permission. 


ON THE DVD 
/~. Te follow this 
( () _ ) tutorial, simply 
— _/ use the files on 
~_—_ your coverdisc in 
the 3_flash2_p132 folder. 


TERROR INVASION 
FIGMENT 


SHADES 


PROFIEEUSION 


MAGPIE 


Flash lends itself well to Web comics, thanks to the 
timeline’s blend of linear animation features and non-linear 
interaction. British artist Daniel Merlin Goodbrey uses both 
in his online ‘Hypercomics’ series (www.e-merl.com). 


W's o pattern 
buried in the 
web of simple 
actions we 
perform every 
day. 


Scott McCloud (www.scottmccloud.com) has become an 
authority on comic strip artwork with his seminal books 
Understanding Comics and Reinventing Comics. Using 
Flash, he's built The Right Number - a strip that uses a 
‘zoom-in’ technique to segue effectively between panels. 


WELCOME TO 
HEAVEN, JOHN! 


Patrick Farley's ‘Electric Sheep’ brand is well known in the 
world of Web comics. Many of his strips are presented 
direct in HTML, but Apocamon - a Manga style retelling of 
the Book of Revelations — uses Flash timeline techniques. 
Visit www.e-sheep.com to find out more... 


INCREDIBLE HULK # 35 PART 2 


Marvel characters are seeing a resurgence in cinemas with 
the X-Men, Spider-Man, Daredevil and The Hulk. Read their 
Flash-powered adventures for free at www.marvel.com. 
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PART 1 SETTING 
UP THE TIMELINE 


Open comicstarter.fla from the 
3_flash2_p132 folder on the DVD 
and prepare the groundwork J 


One underused property is the Layer Height 
setting. You can choose from 100, 200 or 300 per 
cent. Normally, you wouldn't need to touch this, but 
it can be handy if you want to make a layer easier to 
spot while you're working on it, or if you’re working 
with sound or video layers. 


Comicstarter.fla is essentially an empty file with a 
fully populated library. This contains all the 


artwork you'll be using throughout the tutorial. The label should now be editable — rename it 


‘ActionScript’, then rename the others ‘Labels’, 
‘Buttons’ and ‘Artwork’, from top to bottom. Right- 
click on the ActionScript layer and choose Properties. 


Select the Buttons layer and click the Insert Folder 

button. Rename it ‘Stage Elements’, then Shift- 
click on the layers called Buttons and Artwork to 
select them. Drag and drop the layers into the newly 


created folder. The timeline is now ready. 


By default, the timeline contains one layer. For 

this project, you'll need three: to add these, click 
the Insert Layer icon at the bottom-left of the timeline 
or choose Insert>Layer from the main menu. 


a com 
Match: (_Birver ] [Gonens] [Detaut } 
Beckgound Color o! 
Frame Rate: fps 


g] Fie Edk View Insert Modty Text Control Window Help 


Js3HNOe\ 7 


The Properties dialog gives you quick access to 


RulerUnits: |Puels 
all the attributes you can set for a layer. The Guide 
layer type is used in animation to create a path for an 


Cox) (corcet_) 
object. Mask layers enable you to create a ‘hole’ 


through which you can see the layer below. Time to add some content... Note that if you were 

using this timeline to create animation, you'd 
probably want to tweak the Document Properties 
before proceeding. A quick way to access this dialog 
is to double-click on the frame rate displayed at the 
bottom of the timeline. 


QSeSC a> 07 


You can also right-click (or Ctrl-click on the Mac) 

within the layer listing to bring up a context- 
sensitive menu. There's an option to insert new layers 
there as well. Once you've added the extra layers, 
double-click on the top layer’s Layer Name. 


Changing the Outline Colour of the layer also 

changes the colour swatch next to the Layer 
Name in the timeline. Outline mode displays the 
contents of the current layer as vector outlines—this 
only works if you have vector artwork on the stage. 
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THE TIMELINE 


With the timeline up and ready, it’s 
time to add some decent content 7 


1 0 First off, set the document size to 850x400 in 

the Document Properties dialog. Select the 
layer named Artwork, then open the Library 
(Window>Library) and find the graphic symbol 
title.gif. Drag it to the centre of the stage. 


1 1 Click in the second frame of the layer and go to 

Insert>Keyframe. Alternatively, right-click (or 
Ctrl-click on the Mac) and select Insert Keyframe from 
the context-sensitive menu (or press F6). Delete the 
title.gif artwork in frame 2, then drag and drop the 
graphic symbol wild1a.gif into its place. 


1 2 Switch to the Buttons layer and insert a key 

frame at frame 2. Drag the graphic symbols 
next.gif and back.gif to the stage and place them as 
shown in the illustration above. You'll have to resize 
them to 50 per cent using the Transform panel. Next, 
drag the numbered images 1.gif to 12.gif to the stage 
and scale them to 30 per cent. 
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1 3 Roughly arrange the numbered images so that 

they run from 1 until 12 between the ‘next’ and 
‘back’ images as shown. To align them, select them all 
and go to Window>Align, making sure that the To 
Stage icon is toggled off, then click the Align Vertical 
Centre and Distribute Horizontal Centre icons. 
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1 4 Select the keyframe at frame 2 of the Button 
layer, then Shift-click on frame 12 to select 
all the frames between. Right-click (Ctrl-click on the 
Mac) to bring up the context-sensitive menu and 
choose ‘Insert Frame’. This spreads the content of 
the keyframe over 12 frames. 
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1 Select the keyframe at frame 2 of the Artwork 

layer, then Shift-click on frame 14. Choose 
Convert To Keyframes; this adds keyframes to every 
selected frame in the layer. Also, add a blank 
keyframe at frame 14 of the Buttons layer. 


1 The previous steps essentially copied 

keyframe 2 on the Artwork layer across 13 
frames. You could've chosen Insert Blank Keyframe 
instead, which inserts empty keyframes in each slot. 
In either case, the next step is to add content from the 
library to each individual frame. 


H - — 
1 Select the third keyframe, delete the current 
image (wild1a.gif) if you added populated 
frames, then drag image wild 1b.gif into its place. 
Continue adding the remaining images from 
wild2a.gif to wild6b.gif, one for each keyframe 
from 4 to 13 in the same way. 


1 Select frame 14 on the Artwork layer and 
delete the content on the stage. In our 
completed file, we added a text box crediting the 
artist - for the purposes of this tutorial, you can 

simply add a box that says ‘The End’. 
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PART 3 ADDING 
INTERACTION 


The timeline is done, the elements 
are all in place — now to animate! 1 
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1 Go to the layer you named ActionScript 

and right-click (Ctrl-click on the Mac) on the 
keyframe at frame 1. Choose Actions to bring up the 
Action Editor. In the Actions hierarchy on the left of 
the panel, go to Actions>Movie Control and double- 
click on the ‘stop’ to add a ‘Stop()’ action to the frame. 


2 Select frame 1 in the ActionScript layer, as 
shown, then Shift-click on frame 14 in the 
same layer. Right-click (Ctrl-click on the Mac) and 
choose Convert To Keyframes, duplicating the 
keyframe at frame 1 across all 14 frames. 


to ieee 
* 
WELDS fot 
i 


ADVENTURE 


2 click on frame 14 in the same layer, then 
Convert To Keyframes. Select the first frame and 
go to Properties. In the Frame Label box, type ‘start’. 
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2 Select the next keyframe and change the 
Frame label to ‘wild1a’, the next to ‘wild1b’, 
the next to ‘wild2a’, and so on, until you reach 
‘wild6b’ at frame 13. Label the final frame ‘end’. 


2 Go to the Buttons layer and select 1.gif on 

stage. Press F8 to convert it to a symbol. 
Choose Button and name it ‘wild1abutton’. 
Returning to the stage, select the new button 
and hit F9 to bring up the Actions window. 


on (release) { 
GOtoAndP lmy ("wilde") ¢ 


2 In the Actions Editor, double-click on Goto 
under Actions>Movie Control, then choose 
Frame Label from the Type dropdown. Choose 
wild1a. Now create buttons from all the numbered 
images, linking them to the corresponding frame in 
the same way, until all the frames have been treated. 


FINAL STEP 


he Back and Next images should be turned into 

buttons in the same way. When adding movie 
control actions to them, choose Goto, then Previous 
Frame from the Type dropdown for the Back button 
and Next Frame for the Next button. 


ADVENTURE 


A selection of comic strips by John Broadley 
Compiled for the Globai Interweb by Karl Hodge 
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DREAMWEAVER 


Let your visitors choose the way they want 

to view your site by selecting alternate style 
sheets that you've provided for them. Here, 
we show you how to implement a useful style 
sheet switcher, using an excellent technique 
developed by Paul Sowden. Use the files on 
your DVD in the folder named 3_dw3_p137. 


BUILD ASTYLE SHEET SWITCHER 


g 


SHORTCUTS 


mT 


ascading Style Sheets enable 

you to format your site using 

powerful layout, colour and 

typographic controls, simply by 
attaching a CSS style sheet to your pages. 
But why stop with one? With just a little 
effort, you can design alternative style 
sheets for your site, enabling users to 
select for themselves which one they 
want to use. 

This may sound gimmicky, but it’s 
anything but. Many people have different 
requirements for the type size and colours 
they find comfortable to read. By offering 
variations, you can make your visitors’ 


pa <head> 
a <title>Style switcher</title> 
m<meta http-equiv="Content-Type” content="te 
fe <link href="basic.css" 
rel="stylesheet" 
type="text/css" /> 
<link href="main.css" 
rel="stylesheet" 
type="text/css" title="main" /> 


im <link href="alti.css" /heaa> 
rel="alternate stylesheet” 
type="text/css" title="alti1" /> <body> 


<link href="alt2.css" 
rel="alternate stylesheet” 
type="text/css" title="alt2" /> 


<link href="alt2.css" 
rel="alternate stylesheet” 
type="text/css" title="altz2" /> 


<script language="JavaScript" 
srce="styleswitcher. js"></script> 


<div id="header"> 


Design a set of style sheets and link to them from the 

head of your page, as shown above. Give each style 
sheet a title to identify it. Alternative style sheets should 
say rel="alternate stylesheet”. See code.txt file on the DVD. 


To make a linked style sheet persistent, omit the title 
attribute. Now place the styleswitcher.js JavaScript file 
in your site folder, and link to it from the head of your page. 


minim veniam, quis nostrud exercitation ull 
voluptate velit esse cillurn dolore eu fugiat 
mollit anim id est laborum. 


Lorem ipsum dolor sit amet, consectetuer ; 
l 


Sed ut perspiciatis unde omnis iste natus e| 


m<div id="nav"> 
<p> 
a hret="#" 
onclick="setActiveStyleSheet ('alti') "> 
alternate 1 


</p> 


<a href="#" 
onclick="setactiveStyleSheet ('alti') "> 
alternate 1 


Create a text link or image link for each style sheet that 

you want users to be able to select. In a real site, make 
sure it’s obvious that these aren't regular navigation links; 
otherwise, you may confuse your visitors. 


Apply an onclick event handler to each link to select 

the relevant style sheet, as shown. Use the title of the 
style sheet in question, or null to deactivate all but the 
persistent style sheet. Job done! 


experience much more enjoyable, thus 
ensuring they come back for more. 

The technique we're talking about here, 
and the code to drive it, were developed 
by Paul Sowden, who originally made the 
code freely available at www.alistapart. 
com. Like many of the little touches that 
can set your sites apart, this technique 
requires you to edit some code to make it 
work, as well as the tags that link to the 
alternate style sheets and the link tags that 
select the different style sheets. 

The trickiest bit is actually creating the 
different style sheets. When you create a 
CSS style in Dreamweaver, it prompts you 
to specify what sort of style you're creating 
and where you want to define it. The 
easiest way to make these is to create all 
the styles you need initially in a single style 
sheet. Make a copy of it once you’re 
finished and save it with a new name. 
Then, just change the aspects of the new 
style sheet that need to be different. 
Repeat the process to create further 
alternative style sheets. 

Amore efficient way is to create a 
common style sheet that won't be 
deactivated and include the formatting 
common to all the style sheets. Then you 
can create an additional preferred style 
sheet that will be active when the page 
loads, and further alternative style sheets 
that the user can select which contain only 
the style information they need. This is 
what we've done in the example files. 

As you'll see from the walkthrough to 
the left, the alternative and preferred style 
sheets are referenced using LINK tags that 
have title attributes. To link to the basic 
style sheet so that it won't be deactivated 
when the user changes styles, simply 
ensure that it has no title attribute in its 
particular LINK tag. 

Paul Sowden’s code includes functions 
to activate and deactivate style sheets. It 
also uses cookies to store the name of the 
current style sheet as the user moves 
through the site, and to make sure the 
browser remembers their choice on 
subsequent visits to the site. For further 
information, read Sowden’s original article 
at A List Apart: www.alistapart.com/ 
stories/alternate. The technique has 
now become a widespread interface 
convention —for some more examples of 
how it has been used to great effect, see 
www.zeldman.com, www.wired.com 
and www.meyerweb.com. 


INFO Expertise supplied by lan Anderson of zStudio, 
ian@zstudio.co.uk, www.zstudio.co.uk 
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WEB CARTOONS 


FLASH MX ANIMATION 


In the final part of our in-depth look at Flash MX, 
we create the credit sequence for a Web cartoon 
using the package’s powerful animation features 


There’s no avoiding it— when people think 
of Flash, they think of animation. It may well 
have evolved into an application authoring 
package, but there are good reasons why 
it’s largely famous for animation. The 
combination of vector graphic support 
with the easy-to-use timeline makes it a 
pleasure to work with. Even if you've 

never considered animation before, Flash 
MX provides you with enough roads in to 
inspire anyone. 

The most obvious way to get started is to 
use frame-by-frame animation. Pioneered 
in the earliest days of the art, this technique 
is given an interesting new twist in Flash. 
Vector graphics enable you to make 
changes to artwork quickly, while layers 
enable you to build up static backgrounds 
to accompany your work. The package’s 
ability to adapt to other media means that 
you're not confined to using Flash’'s 
drawing tools. You can just as easily use 
the program in a more traditional way, 
scanning in artwork and arranging it in 
Flash. The results can be instantly viewed 
and tweaked in a variety of ways. 

This traditional method is augmented by 
several features that you could only achieve 
digitally. Tweening is Flash’s killer feature — 
a method that enables you to specify the 
start and end points for an animation, 
letting Flash work out the frames in- 
between. As the package has become more 
sophisticated, tweening has too. In Flash 
MX, you can automatically animate the 
rotation, scale, colour, transparency and 
position of objects. If it’s necessary, you can 
do all of those things at once —creating 
spinning objects that grow larger as they 
fade into view, for instance. To control the 
movement of objects, you're also able to 
define paths that combine with tweening 
techniques to give a superb level of control. 

Flash 4introduced a feature that enables 
you to take two different shapes and 
animate the transformation from one to the 
other. Again, this is a form of tweening, 
requiring you to simply place two 
keyframes on the timeline containing two 


different objects. Creating the animation is 
as simple as selecting a menu command. 

In isolation, such techniques are easy to 
master, but when combined into a single 
project, the results can be very impressive 
indeed. Over the last two tutorials, we’ve 
looked at Flash’s drawing tools and timeline 
in detail. In this concluding section, we 
combine all that knowledge with Flash's 
animation techniques to create the 
introduction to a Web cartoon. We'll show 
you all the techniques we used to complete 
the project: how to combine frame-by- 
frame animation with tweening effects, 
how to morph shapes and create fades. The 
full, finished project is on the cover DVD for 
you to look at and deconstruct in Flash. 


INFO Words and Flash expertise by Karl Hodge, 
khodge@spodgod.com 


ON THE DVD 
The files you need 
© to follow this project, 
including the final 
result, are on the DVD 
in the 3_flash3_p138 folder. 


/ 


Flash animation & 


The Mr Men are back - in Flash form! Actually, these 
cartoons have nothing to do with the famous Roger 
Hargreaves’ Mr Men series - they're a collection of 

quirky ‘films’ by Steve Whitehouse. You'll find them at 
www.whitehouseanimationinc.com — have a look at what's 
possible when you use Flash as an online animation tool. 


I want to 
take you 
to a gay bar 


Proof that having one good idea can kick-start a career, 
Joel Veitch’s work has recently made the transition from 
Web to TV. You can still see a collection of his Flash- 
powered animations of guitar-wielding kittens singing 
glorious pop songs at www.rathergood.com. 


Homestar Runner (www.homestarrunner.com) has 
acquired cult status among the net community, even 
getting a recent name-check on Buffy The Vampire Slayer. 
The site’s high-point is Teen Girl Squad — a bizarre 
combination of fashion tips and extreme violence. 


$3 ‘ f y 


Viral marketing is the natural next step for successful 
Flash animators - and that’s what JibJab specialises in. 
Visit www.jibjab.com for Flash cartoons you'll definitely 
want to pass on to your friends. 
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PART 1 
FRAME BY FRAME 


Locate the Flash tutorial folder on your 
DVD and find credits_tutorial1.fla 1 


Insert a blank keyframe at frame 3. Notice how 
the Onion Skin Markers change to encapsulate all 
three frames. You can manually alter the beginning 
and end markers so that onion skinning affects as 
many or as few frames as you like. Alternatively, 
clicking the Modify Onion Markers icon enables 
you to select a choice from a menu. 


Open credits_tutorial1.fla in Flash MX. This is 
an empty movie that contains all the various 
media you'll need to complete this tutorial. The file 
gordon_credits.fla is the finished project using the 
techniques we'll discuss, while gordon_credits.swf 
is the Shockwave Flash version. 


Open the Library (Window>Library) and find 

the Fish folder. Inside it are four graphic symbols. 
Drag and drop the symbol named gordon’ to the 
stage, as shown. A preview of the symbol will appear 
in the timeline. Centre the symbol on stage using the 
‘Align’ panel (Window>Align). 


Drag and drop an instance of gordon3 to the blank 

keyframe and, as before, use Onion Skinning to 
position it. Create a blank keyframe at frame 4 and 
add an instance of the symbol gordon4. 


Go to Insert>New Symbol and choose Movie 


Clip. Name the clip ‘gordon_swims’. Next, we Select frame 2 and hit F7 to place a blank 
need to set up the timeline for frame-by-frame keyframe. Drag and drop an instance of the 
animation. In the top-right corner of the timeline graphic symbol ‘gordon2’ to the stage. To help you 
is the Frame View pop-up menu —click the icon to correctly line up the second frame with the first, you 
open the menu and choose Preview. can switch on Onion Skinning - a mode that enables 


you to see the previous frame. 


When you're happy with the positioning of the 
= om Tet toed tna symbols, click the Onion Skin Outlines button 


again to switch it off, then turn off Outline mode 
in the layer. Hit Enter to view your animation. 


Caeseorvv8"89G 
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In Preview frame view mode, each frame in the 
timeline shows the artwork on stage — this is 

handy in frame-by-frame animation, giving youa 

visual cue as to what's happening while you work. 


In this case, switch the Layer to Outline mode by 

clicking the fourth icon along in the layer 1 label. 
Select the second of the Onion Skinning icons on the 
bottom-left of the timeline — the Onion Skin Outlines 
button. Move the symbol you placed in the frame 
until it’s correctly aligned. 
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PART 2 
LINEAR MOTION 


Using our frame-by-frame animation 
to take things further — with motion J 


s) ting 

1 Return to Scene 1 of your movie - there’s a link 
at the top of the stage window. Drag and drop 

an instance of the gordon_swims movie clip you 

created to the stage. In the Transform panel, enter 

50 per cent to scale the clip down. 


1 1 Select frame 30 and hit F5 to insert frames. 
Right-click (or Ctrl-click on the Mac) the layer 
label to bring up the context-sensitive menu for layer 
1 and choose Add Motion Guide. This adds a guide 
layer that’s joined to the original layer. Select this. 


1 2 Select the Pencil tool from the Tools panel. 

Click the Options icon at the bottom of the 
panel and select Smooth. In the top-right section of 
the stage area, use the Magnification menu to zoom 
out to 50 per cent. Use the Pencil tool to draw a wavy 
line across the entire workspace — from one side of 
the stage to the other, as shown. 


1 ta in the screenshot that the line moves 
completely outside the limits of the stage. 

When we play the movie back, our character will 

swim into the screen from one side and out the other. 


1 4 Select Layer 1 and highlight frame 30. Hit 

F6 to insert a new keyframe. Select the first 
keyframe and select the instance of gordon_swims 
on stage. Set the Tween menu in the Properties panel 
to Motion. Tick Orient To Path and Snap. 


1 The Orient To Path setting makes your 
animated symbol rotate in the direction of the 

guideline. The Snap setting helps the object on the 

animation layer snap to the ends of the guideline. 


>INSIGHT = 


’ 

Flash animation ) al o 
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1 With the first frame still selected, move the 

gordon_swims movie clip so that its centre 
mark snaps to the end of the motion guide on the 
right of the screen. With the object still selected, 
hit Q to select the Free Transform tool. 


1 Hover the cursor close to the object until it 

changes to the Rotate icon. Manually rotate the 
movie clip so that it faces in the direction of the path. 
Select frame 30 and move the second instance of the 
clip to the end of the path on the left, aligning the 
centre mark over the end of the path. 


1 Again, manually rotate the clip in the direction 

of the path. Press Ctrl+Enter to test the 
playback of the movie. The process we've described 
applies to all instances of motion tweening; to make a 
clip move along a straight axis, you don’t need to add 
a motion guide layer. Just start and end keyframes. 
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PART 3 
SHAPE TWEENING 


How to transform one shape into 
another to create exciting transitions J 


1 Although the basic technique is similar to that 

outlined in Part 2, shape tweening has some 
functional differences that should be addressed 
directly. To see an example of shape tweening in 
action, open the file credits_tutorial2.fla, drag and 
drop an instance of fishhatlogo from the Text folder 
in the library to the stage and press Ctrl+Enter. 


20 In this example, letters morph into bubbles 
(which then rise using a motion tween). These 
are quite different shapes but the transition works 
because the shapes are simple. The animation is 
simply a transformation from rectangle to circle. 


2 1 To try out the technique for yourself, delete 

the movie clip fishhatlogo from the stage, 
then drag and drop an instance of fishhat_text in the 
root of the library. Unlike motion tweening, shape 
tweening works on single shapes, not symbols. 
Select the text and hit Ctrl+B twice. 
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Phiri bal a objects, and in 
Flash MX there are many dedicated commands 
that control the state of objects, which can be 
used in animation. Open our finished project file 
(gordon_credits.fla) and the library, going to the 
bubbles folder. In here is a movie clip called 


randomly generates bubbles 
in our movie. The key is the duplicate MovieClip 
item, which random duplicates copies of a 
movie clip at different co-ordinates and scales. 
This code was cleaned up and adapted from the 


2 The first Ctrl+B breaks down the symbol, the 
second breaks the text down into individual 
letters. Go to Modify>Distribute To Layers. Each letter 
is assigned its own, uniquely named layer. Select 

layer F and insert a keyframe at frame 10. 


| 


2 Select keyframe 10 and drag and drop an 
instance of the graphic symbol text_bubble to 
the stage. Align it over the letter F. Click away from 
both objects to deselect everything, then select the 
letter and delete it. Select the bubble symbol and hit 
Ctrl+B to break the symbol down into a shape. 


2 abe to frame 1 and select the letter F. Hit 
Ctrl+B to break the symbol down into a shape. 
Go to the Properties panel and chose Shape from the 
Tween menu. Add frames at frame 10 for each of the 
other layers. Press Enter to see your animation. 


FINAL STEP 


Y= can control more complex shapes using 
shape hints. Choose Modify>Shape>Add Shape 
Hint to add a point to a shape you're transforming, 
then add a corresponding point on the shape it’s 
transforming into. You can add as many hints as 

you like to control the process. (] 


DREAMWEAVER 


Tables are one of the staple elements of Web 
design. Here, we offer a few hints on how to 
design effective layout tables and provide the 
right structural tags for data tables 


sing tables for layout isn't in itself 
bad for accessibility, contrary to 
common belief, provided that the 
content makes sense when the 
content in the table cells is linearised. 

When you're building tables for layout, 
it's usually best to design the page in 
horizontal bands, making each band a 
separate table instead of making the 
whole page using one single table. This 
approach speeds up the display of the 
page as it loads, because each table is 
drawn individually. With one giant table, 
the browser has to wait until it reaches the 
end before it can display anything. 

Within each main table, it’s a good 
idea to use a series of simple nested 
tables (or CSS properties like padding 
and borders) instead of making each table 
very complex. Nested table design does 
sometimes slow down older browsers as 
they render the page, but so does making 
them fight through many complicated cell 
spans by trying to make a single table do 
the same work. 

Dreamweaver offers a Layout Table 
mode that can make it easier to position 
elements, such as images, precisely. 
However, it’s best to use Dreamweaver's 
Layout Tables sparingly, both for the 
reasons just mentioned and because the 
table code that’s generated may be much 
bulkier than its hand-created equivalent. 

Now on to data tables — tables that are 
used to display rows and columns of 
tabular information. These require a 
different approach from layout tables. In 
the HTML 4.0 recommendation from the 
WSC, they state that layout tables should 
only use the tags TABLE, TR and TD, and 
not contain any other structural markup. 
Data tables, on the other hand, were given 
an overwhelming number of additional 
structural tags to make their meaning 
clearer (to everyone except Web 
designers, it seems). 

This is necessary because, in a data 
table, the meaning of any one entry in the 
table is not intrinsic; it derives its meaning 


from its position in the table, and in 
particular from its column and row 
headings. This is fine for sighted people, 
but to make pages more accessible to 
disabled visitors — and software tools — 
HTML provides a variety of additional 
structural markup you should use. 
Although the wide range of tags 
available to mark up a table by the W3C is 
overwhelming, there’s a bare minimum 


TO MAKE PAGES MORE ACCESSIBLE TO 
DISABLED VISITORS — AND SOFTWARE TOOLS - 
HTML PROVIDES A VARIETY OF ADDITIONAL 
STRUCTURE MARKUP YOU SHOULD USE 


MARKING UP DATA TABLES 


‘SHORTCUTS 


mT 


you can use for all but the most complex 
of tables, so that you can make the 
meaning clear without requiring a degree 
in rocket science to build the table. The 
main things are to explain what the table is 
about, and to indicate the row and column 
headers for a given item of information, so 
that assistive technology, such as screen 
readers, can provide the context for each 
item of data if required. 

Dreamweaver provides some 
additional interface options for creating 
accessible tables, as shown in the steps 
below, but be sure to turn them off again 
if you're not making data tables. 1 


Expertise supplied by lan Anderson of zStudio, 
ian@zstudio.co.uk, www.zstudio.co.uk 


Preferences 


Show Attributes when Inserting: 


I~ Form Objects 
T” Frames 
T Media 
Fonts T™ Images 


Code Rewriting 
CSS Styles 
File Types / Editors 


Highlighting 


IV Tables 
Invisible Elements VI 


Accessibility Options for Tables 


Get more help for data tables - turn on the extra 


When you insert a table, Dreamweaver gives you 


accessibility options. Choose Edit>Preferences, then in 
the Accessibility category turn on the option for Show 
Attributes When Inserting: Tables. 


an additional dialog box containing further options. 
Provide a CAPTION element to provide a brief explanation 
of the table’s purpose that will be visible to all. Position the 
caption using your menu options or format it with CSS. 


a 

An canton: fection =] | 
| eed 
| 


Summary: {Sales results in EMEA region by product “ 
category 
| al 


Header: [both >] 5] 


tyle * 
=| yi) Target 


No Wrap [— Bg 
Header Iw Bq EF 


Enter some more detailed summary text that will be of 

assistance to disabled users. Use the Header menu to 
specify whether headings are in the top row, left column, 
or both. This prompts Dreamweaver to use TH tags with 
appropriate SCOPE attributes, instead of TD tags. 


If the row headings are items of data in their own 

right under a heading in the top row, this markup 
will be incorrect; the row headers should be TD tags in 
this case. To change from TD to TH or vice versa, use the 
Header checkbox in the Properties palette when the 
relevant cells are highlighted. 
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ONLINE PORTFOLIOS 
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Your online portfolio is your virtual calling card, 
your passport to a healthy client base, a clutch of 
commissions — and money in the bank. We asked 
leading illustrators and artists around the world for 
their advice. Their response? Keep things simple 
and learn to make the Web work for you 


he days when illustrators and artists have 

to march around London design firms and 

publishers of newspapers and magazines 

to showcase their hand-bound portfolios 
are fading fast. With the rise of digital ways of 
working, the industry seems to have become 
more efficient - art directors are now able to glean 
information on illustrators from the Internet 
without even meeting them. 

While it’s true that the traditional portfolio is far 
from dead — physical, printed material is still an 
important factor in employment and education — 
the online portfolio has become a vital asset for 
any freelance illustrator or small company, the 
general consensus being: if your work can be seen 
24 hours a day, then more important people will 
be able to see it. 


GETTING NOTICED 

There are, of course, many online portfolios on the 
Web - some good, and some which don't do the 
illustrator or artist much justice. The proof of 
whether your online portfolio is working or not, to 
some extent rather obviously stems from the 
amount of work you're getting. However, if no one 
is seeing it, then it’s practically useless. 

Lawrence Zeegen, illustrator and educator, 
takes a literal approach to driving people to his site 
Zeegen.com — by stamping the words on each and 
every one of his illustrations. The site itself is 
simple, clean and updated ona regular basis, 
attributes that Lawrence thinks all good portfolios 
should have. “Get rid of all typos, make sure the 
thing loads the right side of Christmas and don't 
bore folk with long intros that do nothing and say 
nothing. Make it usable and make it work for you.” 

The fact that Brighton-based Lawrence's work 
is online, and accessible all of the time, means a lot 
to the illustrator. “Having clients in the US able to 
view Zeegen.com whenever and wherever is vital. | 
get hits from all over —they may not all turn into 
commissions, but the fact that people are looking 
means that the site is earning its keep. | do still have 
clients, though, that want a traditional leather- 
bound folio biked to their offices — and | find that 
really odd nowadays.” 

Another Brighton-based design firm, Magictorch 
(www.magictorch.com), works on the same 
principles. Mike Chipperfield, one half of the 
company, tells us: “Clients in different time zones 
don't give a monkey’s what the time is here —they 


1. www.magictorch.com 
Combining the company’s portfolio 
with a host of interesting downloads 
and news-based items, Magictorch’s 
HTML site adheres to the theory 
that showcasing images through 
simplicity really works. 


want to be able to see examples of your work now. 
You can’t target every possible client - they need to 
be able to track you down and an online folio 
makes that much easier.” 

Having an online portfolio site since day one 
has helped Magictorch gain commissions from a 
diverse range of clients. Mike shares his experience 
with us about what makes a top-quality offering. 

“In most cases,” he says, “the simpler, the better 
is the best advice. But, then again, make sure you 
don't go too minimal just for the sake of it —for 
example, using tiny little numbers instead of 
thumbnails may look cool, but it makes it difficult 
for people to find the same piece of work on repeat 
visits — a site needs to be usable and there's a fine 
balance to be struck. Let the work speak for itself, 
rather than wrapping it in too many gimmicks. 
Think twice before going ballistic with Flash— does 
your site really need it? Also, make it easy to 
update, otherwise you'll have to rebuild the site 
every time you want to add some new work.” 


PERSONAL STYLE 

Due to the huge range of illustration styles and 
mediums, online portfolios are often as diverse as 
the work they aim to show off. When planning a 
site, it’s extremely important to realise your own 
style, and not design just for design's sake. As Mike 
from Magictorch emphasises, there’s no point in 
being minimalist for the hell of it. 

Craig Metzger, a New York-based artist currently 
working on pattern designs for skate giants Etnies, 
takes a lo-tech approach in his online portfolio at 
Enginesystem.com, concentrating heavily on 
showcasing his artwork in his own style. 

“An online portfolio should only showcase your 
favourite or strongest work, but at the same time | 
think you should try to avoid the stale design of a 
portfolio and add your own twist,” he explains. “I 
don't look at my site as being a portfolio, but more 
as asmall showcase of some of the projects | like, 
with a personal touch.” 

It’s all very well being an established artist or 
designer, but students often need to take a different 
approach to their online portfolios in order to 
master that rather large stepping stone into the 
industry. Anthony Kobler’s Vectorstains.tk has 
the feel of a design agency’s portfolio, infused with 
original artwork and clever navigation. Currently 
a student at Swinburne NSD in Melbourne, 
Australia, Anthony gives us his thoughts on the 


makings of a good online portfolio: “Primarily, | 
think that an online portfolio should showcase the 
artist's works in many different and varied areas of 
design. | think that for the site to be appealing, it 
should contain some elements of the individual's 
personality as well. | guess an online portfolio 
shouldn't just be a personal thing, not somewhere 
where you just post your opinions on everything. 
In asense, it should be professional and 
corporately viable, too.” 

‘Corporately viable’ is a phrase that conjures up 
visions of static, passive Web experiences. This 
needn't be the case, though — Anthony proves that 
a site can appeal to a professional audience as well 
as peers. Regular Computer Arts contributor 
Derek Lea has the same fundamental approach, 
and has crafted a site that immediately appeals to a 
client audience, as well as being imaginative and 
intuitive, yet simplistic in its design. 

Derek explains: “Simplicity works. Clients are 
there to see your work, not to be dazzled by your 
multimedia extravaganza. Cut out the Flash stuff - 
they've seen it all before. They are there to look at 
reference images of your work, and that’s what it 
comes down to every time. Make your work easy 
to get to, organise it as clearly as you can, and 
design your site so that the images grab the client's 
attention, not the interface. Provide a variety of 
subject matter, you never know who is looking to 
hire you.” 

These are wise words indeed, because Derek 
has such a broad range of work for so many 
different clients that it would be impractical to 
mould the whole lot together with an overworked 
Flash interface. 

This is something more designers should take 
seriously. It’s all very well building a site that 
pushes the Flash envelope, but unless this is an 
integral part of your day-to-day design work, clients 
are likely to be baffled by what you think is cutting 
edge. We don't want to come across as ‘Nielsen- 
esque’, but usability must be considered atthe ~? 


2. www.vectorstains.tk 

The combination of slick vector 
graphics and immediately usable 
navigation makes student Anthony 
Kobler’s www.vectorstains.tk a 
superb online showcase. 


3. www.enginesystem.com 

A different kind of online portfolio. 
Showcasing New York-based artist 
Craig Metzger's screenprints and 
other work, Enginesystem.com 
works for the reason that it reflects 
the style of the artist and presents 
the work in a user-friendly manner. 
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4. www.jacey.com 

One of Jacey’s four sites, Jacey.com 
showcases the illustrator’s different 
styles and is up-to-date and easily 
navigable. Jacey believes keeping 
your online portfolio current is 

of paramount importance. 


5. www.elelec.com 

Eduardo de Felipe goes with the 
theory that everything should be 
accessible — have a concept and 
showcase your ability. The idea 
behind Elelec.com was to create a 
relaxing visual interface in direct 
contrast to the crazy world normally 
associated with the Internet industry. 


6. www.zeegen.com 

Lawrence Zeegen’s online portfolio 
contains an eclectic mix of the 
illustrator’s editorial and corporate 
work. The site is Flash-driven, stylish, 
simplistic and accessible. 


7. www.dereklea.com 
Professional illustrator Derek Lea has 
gone for all-out simplicity with his 
online site, making it clear that the 
client is there for the images. It has 
an instant visual appeal. 


same — if not higher —level as aesthetic when it 
comes to designing any portfolio site. 


STRIKE A BALANCE 


An illustrator who has succeeded in combining 


usability and aesthetic is Jason Cook, better known 
as Jacey. Within each of his sites at Jacey.com, 
Flatlineronline.com, Jaroslav.co.uk and Getart.info, 
Jacey showcases different styles within different 
portfolios. Each site reflects the style of illustration 
within its navigation and overall feel. 

“Keeping the sites updated is a biggy,” explains 
Jacey. “There's nothing worse than a site that isn’t 


will love you for it. 


updated or refreshed.” The often simple task of 
updating gives clients the idea that you’re in 
demand, so constant updates are a must. Making 
your site easily updatable is vital from the offset. 

Another example of a Flash-based site that 
drives users to content is www.elelec.com. The 
man behind it is Eduardo de Felipe, a freelance 
interactive designer based in the UK and Spain. As 
well as explaining that a site should showcase 
content in an accessible way, Eduardo gives some 
advice that is relatively easy to forget. “Your 
portfolio has to include info about yourself and 
your career, as well as your style and project 
methodology. You're selling your professional 
work and you have to think about the design, 
structure, usability and user experience.” 

The general feeling from all the artists, 
designers and illustrators we've spoken to is to 
let your images do the talking. Reserve the 
bells and whistles for experimental projects. 
An online portfolio needs to tell a client that you're 
the best person for the job, and if your work isn’t 
immediately accessible, then the client may think 
the same of you. Keep it simple and keep it fresh — 
your peers may be a little unimpressed, but clients 


ADVICE FROM THE PROS 


Remember the audience Keep it updated 


"Always consider the people 
who might view your work," says 
Web guru Hillman Curtis. "This 

is equally true for an interactive 
portfolio. Visitors may include 
advertising execs who don't 
have time to wait for downloads 
or animation and simply want 

to see the work." 

INFO www.hillmancurtis.com 
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"An interactive portfolio is 
essential for many reasons,” 
says Pixelsurgeon's Richard 
May. "New clients are constantly 
discovering my work and 
established ones can keep up 
with whatI'm doing. Having a 
regularly updated site can 

save you time and money.” 
INFO www.richard-may.com 


Make it your own 


Make a portfolio site unique to 
the subjec, says Airside's Alex 
McLean. "For the Nadav Kander 
site we were asked to create a 
beautiful user experience that 
was easy to navigate. We created 
an interface that challenges most 
people's pre-conceived ideas of 
what a portfolio site should be." 
INFO www.airside.co.uk 


Understand the medium 


Understanding the Web is 
paramount, claims Darrell 
Wilkins of specialmoves. “My pet 
peeve is browser windows that 
change their size - especially the 
ones that take over the whole 
screen. It merely reveals that 
they don't understand the 
constraints of the medium.” 
INFO www.specialmoves.com 


Work comes first 


"My recommendation for any 
portfolio is to put the emphasis 
on the work,” says Tonic's Ranzie 
Anthony. "Many interactive folios 
suffer from being pieces of 
design in themselves which 
detracts from the content-the | 
main objective of the piece. A 
balance needs to be maintained" | 
INFO www.tonic.co.uk 


FLASH 
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Discover how to use Flash to create effects such as 
one that emulates a lens focusing on an object. All 
you need is a little of the right know-how 


hl 
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AS YOU CAN SEE, 

THE EFFECT IS SIMPLE, FLASH BITMAPS 
BUT ADDS A NEW 

DIMENSION TO FLASH, Flash movies tend to share the 
AND ONE THAT’S NOT same vector feel, making such 
USUALLY ASSOCIATED animated elements instantly 
WITH SUCH AVECTOR identifiable. Although adding 


excessive bitmap imagery can 


he only problem with using a 

vector-based application is that 

simple bitmap effects, such as 

blurring imagery, are difficult to 
create, even if you import raster 
images. However, with a little 
forethought, you can fake such effects, 
using imagery prepared in Photoshop 
-and Flash’s potent animation tools. 

Take the image you want to run the 

effect over from Flash into Photoshop, 
then adjust the canvas dimensions if 
the blur effect threatens to bleed off the 
edges. Save a copy of the original as 
the focused version of the image, 
before running the Gaussian blur filter 
to create its out-of-focus equivalent. 


Play around with the degree of blur 
until you're happy with the results, then 
save this as your blurred version. 

Import both images into Flash and 
convert into graphic symbols. Create 
two layers, placing the focused image 
on the lower layer and the blurred 
image on top. Align the contents of the 
two layers so that they're perfectly in 
line with each other. 

Add a number of frames to both 
layers, creating a keyframe at the end 
of the blurred images layer. Modify 
this further with the addition of a 
motion tween and adjust the alpha 
value to zero per cent. If you run the 
movie, you'll see how the gradual 
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asove As the blurred top layer becomes 
transparent, the lower focused image 
is gradually revealed — creating the 
illusion of the image being resolved. 


ABOVE RIGHT When scaling the blurred 
image larger, remember to hold the 
Shift key down. This constrains the 
proportions and reduces the risk of 
any distortion during the transition. 


ricHt The Gaussian blur provides the 
most realistic results on this occasion, 
but experiment with other filters for 
different effects when importing 
bitmap imagery into Flash. 


bloat the resulting SWF's file 
size, in moderation the effect 
can be intriguing enough to 
make visitors look twice. 

You might like to experiment 
with other Photoshop filters to 
see what other novel effects 


transparency added to the blurred 
layer emulates a focusing effect. 

If you go back to the first frame and 
scale the images slightly larger, they 
shrink as the transition occurs, giving 
the effect of a camera moving in to 
focus on an object. As you can see, the 
effect is simple to create but adds a new 
dimension to Flash results, and one 
that’s not usually associated with 
such a vector environment. 

You can also use the same technique 
to create motion-blurred equivalents of 
bitmap images, to enhance the feeling 
of motion with animated objects. In this 
case, use Photoshop's Motion blur filter 
to match the direction of movement. 


you can achieve. Or combine 
bitmaps and vector images for 
even stranger results. 
Remember to keep all these 
effects as occasional eye candy, 
though, and don't plan crucial 
site elements around them. 
Make good use of Photoshop's 
Save For Web tool - this will 
help minimise and optimise the 
converted graphic, ensuring 
more efficient Flash objects 
are embedded in your site. 
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Illustration: Matthew Harvey 
Photography: Richard Llewellyn 


CREATING 
THE PAGES 


Learn how to turn your 
Photoshop designs into 
HTML pages using the 
mighty Dreamweaver 


Converting a Web page design, created in your favourite 
image editor, into an HTML page can be done in a number 
of ways. Most applications have provisions in place for 
specifying slices that will constitute HTML tables. 
Although this process generally works fine for designers 
with a basic understanding of Web authoring, it often 
involves a lengthy and tedious configuration process. 

The pages you create will do the trick but might not 

be constructed in the best, most efficient way possible. 

For this reason, we're going to do things the manual 
way by making use of the guides we have in place to 
reconstruct the design as HTML tables. We'll make use 
of the page’s background and table cell background and 
foreground elements in a way that even the most 
advanced slicing feature couldn't anticipate. 

We'll be creating the pages with the most efficient 
layouts in mind, enabling us to reuse elements easily 
and make global updates to the site through the updating 
of a single file. This way, the site can be completed 
reliably and quickly. 

We're going to take a file that we've already created in 
Photoshop and use the application’s Save for Web tool. 
This is one of the most efficient (and easy to use) 
conversion tools for optimising images for use on the 
Web, and it provides consistently high quality graphics 
at incredibly small file sizes. This tool is something that 
every designer creating output for the Internet should 
be familiar with. 

You'll find all the Photoshop files on the DVD. You can 
still use these files even if you prefer to work in Fireworks 
or an alternative image editor, but you may need to adapt 
the various stages. 


INFO Words by Chris Schmidt, chris@track5.co.uk 


~~. The components needed for 
( © this tutorial can be found in 
the folder 3_dweaver_p148 
NN on the DVD. 


PART 1 CHANNELS 


We start by generating a selection 
from an existing alpha channel within 
the image — just like Photoshop \ 


Open the koago_home_final.psd file from the 
DVD and you'll notice that we've conveniently 
highlighted the guides showing how we anticipate 
the page will be recreated as an HTML table. Toggle 
the table borders layer on and off as required 
throughout these steps to remind yourself of 
the page structure. 
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Duplicate the file (see the margin note) and, 

using the available guides, crop the left-hand 
vertical cell. Although this might have been 
included with the cells immediately to the right, 
it's generally good practice when layouts rely on 
imagery to establish the height through a single 
graphic in this way. 


Duplicate the file (see the margin note) and, 

using the available guides, crop the left-hand 
vertical cell. Although this might have been 
included with the cells immediately to the right, 
it's generally good practice when layouts rely on 
imagery to establish the height through a single 
graphic in this way. 


with the smallest file size. 


me 


IMAGE FORMATS 

Images for the Web are usually GIFs or JPEGs. Asa 
general rule, use the GIF format for images that are 
composed primarily of flat colour, such as titles, logos 
and buttons. JPEGs are better suited to more complex 
images such as photographs or textured backgrounds. 
You can toggle between the formats in Photoshop using 
the Save for Web tool and, if in doubt, opt for the one 


This variable image is best suited to the JPEG 
format, so choose that from the format 
drop-down and the preview is quickly updated. 
Experiment with the quality settings, paying 
attention to the resulting file size displayed at 
the bottom of the preview pane. 


The Medium setting provides a file at half the 

size of the High setting with no discernable 
difference in quality, so choose Medium and leave 
the other settings at their default. Click the Save 
button to save the optimised image as c1_r1.jpg 
to a location on your computer. 


The name refers to the column/row coordinates 

~giving layout graphics such logical names 
provides a recognisable order when recreating the 
table in Dreamweaver. Recreate the previous steps 
on the other table cells. Take care to hide the text, 
logo, strap and image placeholders in their respective 


After a few minutes of going through the process 

for all the cells, you should have 13 images that 
constitute your background with names that identify 
their positions within the table. These will recreate the 
image as an HTML page. 


We didn’t include the text and image 

placeholders because these will be separate 
objects within the actual page build. However, the 
logo and strap can be converted, but these are best 
saved as GIF images that will be laid over the 
background image separately. 


The GIF format supports transparency allowing 

this effect. As before, duplicate the file and crop 
the area containing the logo. Take off, and make a 
note of, the dominant colour background (#CCFFFF) 
before hiding any background layers to leave only the 
logo visible. 


—> 
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‘ 
HiNo Transpare. 


| Dlintertaces 


SO% dither 
Selective palette 


Launch the Save for Web tool and change the 
1 0 format to GIF making sure the transparency 
option is checked. As our logo and dominant 
background colour are Web-safe, there’s no 
need to alter the Dither or Web Snap options. 
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1 Use the arrow by the Matte field to choose 

the Other option and enter the colour code for 
our sampled dominant background (#CCFFFF). Click 
OK and zoom into the preview to see the anti-aliasing 
around the image, which will smooth the blend into 
the background. 


1 2 Pay careful attention to how your selection 

affects the preview image and knock down 
the amount of colours used to the least possible. 
We've settled at 16, which may seem extravagant but 
our logo file size is now just over 2KB and the excess 
colours will provide smoother anti-aliasing. 
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Start placing guides by introducing our 
15-pixel border to the top and sides of the 


1 


header. The HTML page will include this border,so 
its inclusion will enable us to rebuild the page 
into a single, more efficient table. 


3 Click OK and repeat the process with the logo 
1 strapline, saving that too as a GIF with 
transparency using anti-aliasing to blend into the 
background. You could crop closer around the image, 
but the reduction in file size is negligible and you may 
run into alignment problems when building the page. 


1 The next logical divides to impose on the 

page are to the left of the logo. With the layer 
selected, drag a guide until it snaps into place. The 
gradient layer also provides a convenient point for 
another horizontal guide, leaving your header looking 
something like the above. 


1 Similar processes can be used against the 
generic page design. Open the 
koago_page_final.psd file that you created in the 
previous section — there's a copy on the DVD if you 
need one. This provides the opportunity for you to 
determine how the imagery will need to be sliced. 1 


Try to figure out for yourself how this 

might best be sliced and check out the 
koago_header_final.psd file to see how it compares 
with ours. All that’s left now is to crop each cell and 
run through the Save for Web tool as we did with the 
homepage graphics 
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1 As the HTML background will cover the page 

colour, we only need to concern ourselves 
with the page header. Duplicate the file and remove 
the current guides via View>Clear Guides and crop 
the header neatly under its image to isolate it. 
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PART 2 BUILDING 
THE PAGES 


Put the assets back together into an 
HTML page to recreate the layout... 1 


Use the Marquee tool in Photoshopto have the 
width of the columns displayed in the Info panel. 

We calculated 15, 136, 184, 115, 285 and 15 pixels 

respectively, which can be applied to the HTML 


oun 
Se ee cca aie table’s columns by dragging to select an entire 
had column and entering the dimensions into the 

+ . 

——" width field. 


You should now have the images required to 

recreate the page layout. Take these from the 
DVD if necessary and save them to corresponding 
folders within a parent graphics folder in which your 


site pages will be held. Launch Dreamweaver and é ; 
choose Site>New Site. Click OK to return to Dreamweaver's main 


interface and you'll be presented with a rather 
sparse range of options. Create a new file in the Site 
panel and name this: index.htm. Open this and we're 
ready to start creating our homepage. 


You can now recreate the PSD file’s cell structure 
in Dreamweaver. To do this, click and drag the 
corresponding cells until they're highlighted and use 


This address enables the Link Checker to 


the Merge Cells option found on the Properties panel 
Pret ie eae to group them together. 
Cache: [2] Enable Cache 
The cache maintains file and asset 


information in the site, This speeds up the 
‘Aaset panel, link management, and Site Map 


features. san re 
Use the tabs to move into Advanced mode, Fi ei 
select the Local Info category and enter the name 
Koago. For the Local Root Folder and Default Images 
Folder locate the folders in which your 
site and its graphics are contained. Enter the site 
address as http://www.koago.com and leave the 
cache enabled. 


First though, open the koago_home_final.psd file 

in Photoshop to refer to our planned table layout. 
Make sure the table borders layer is visible and make 
a note of the number of rows and columns required 
(6x6) and the width of the canvas (750 pixels). 


The height will be determined by the contained 

images, so don’t worry if things are looking a 
little squashed at the moment. To insert an image, 
simply place the cursor in the relevant cell and select 
Insert>Image and browse to the required file within 
the graphics/homepage folder. 


> INSIGHT 


Returning to Dreamweaver, create a new table 

via Insert>Table and use these attributes to 
determine the table properties with 6 rows, 6 columns 
and 750 pixels in the Width field. Leave the Cell 
Padding, Spacing and Border options at 0 and click 
OK to generate the table. 


The Remote Info category will eventually need 

completing to upload the site with FTP address, 
username and password details. For the purposes of 
this tutorial, though, you can leave the Access option 
set at None to continue working on the site locally. 


> 
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1 Do the same for the other cells to recreate the 

original design within the HTML table. Make 
sure you use only the background elements as 
opposed to the logo and strap gifs. Apply Source 
Formatting (see margin note) if things look jumbled 
as you build the page. 


1 As some of the cells need content such as the 
navigation, logo and images overlaid, we'll 
need to move areas of the design into the 
background. To make things easier, select the 
<table> tag and make the table borders visible. 


8) 255.309 
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1 In the relevant cells, delete the image 
currently in place and instead put them into 
place using the background field, which becomes 
available when the cell is active. You'll need to do this 
to the cells that we've planned to contain the 
navigation, logo, strap and image placeholders. 


152]|Creative Collection 2003 


>INSIGHT — 


1 can insert the images into the appropriate 
cells for the logo and strapline. Enter the text for the 
navigation too using Shift-Enter for regular line 
breaks. Once complete, turn off the table borders. 


1 Save and close the homepage file and create 

anew page called: page.htm. Open this to 
start working on the generic page layout. At the same 
time, jump over to Photoshopto remind yourself of 
the layout using the appropriate page and header 
files. 


1 5 Recreate the page table by inserting a table of 

750 pixels using 7 columns and 10 rows. 
We're deliberately using more rows than necessary 
as any excess can be removed once the page has 
been completed. Specify the column widths to 15, 
305, 15, 192, 15, 193 and 15. 


1 Use the top two rows to merge cells to 
recreate the koago_header_final.psd table- 
border-layer guidelines. Then insert the images as we 
did with the homepage, including making use of the 
background level with the logo on top, for example. 


1 Ctrl-click (Win) or Command-click (Mac) the 

table cell where the primary navigation is to 
appear. Choose to right-align the content through the 
Property panel before typing in the necessary text. 
Use Ctrl-Shift-Space (Win) or Alt-Space (Mac) to enter 
extra spaces between words. 


1 The Photoshop file will remind you of the 
dominant background colour (#BEE7E1). 
Choose Modify>Page Properties and use BEE7E1 in 
the background field. Enter a value of 0 into each of 
the Margin fields to lose any spacing between your 
table and the browser window. Click OK and save. 


PART 3 FORMATTING 
THE TEXT 


Create a linked Cascading Style Sheet 
(CSS) to control the appearance of 
the text... 1 


Open the page.htm into which we'll add some 

temporary text. Take the copy from the 
content.doc file and enter into the appropriate cells, 
which should then be right-aligned. Select each of the 
navigation words and create an empty link by 
associating a hash (#) symbol as the link location. 


Type: @ Moke Custom Sie (cles) 
ORedefine HTML Tag 
QUee C95 Selector 


We now have a number of basic elements that 

can be formatted through CSS. Open the Design 
panel and access the CSS Styles tab. Along the 
bottom of the pane are four icons for controlling your 
CSS files; click the New CSS Style option to start the 
process. 


Type: © Make Custom Style (class) 
@ Redefine HTML Tag 
OvUse C55 Selector 


In the New CSS Style dialog box, select the 

Redefine HTML tag option and choose the 
paragraph tag (p). Before clicking OK, choose to 
define the CSS file as a New Style Sheet File; this 
creates an external .CSS file that can be linked from 
other documents in our site. 


Click OK to specify the file name and location of 

the created file. Call it style.css and save to the 
root of your site. When this has been done, you're 
presented with Dreamweaver's CSS Style Definition 
interface from where you can configure the 
appearance of your site’s text. 


Choose the Verdana font, size xx-small and use 

the colour sampler to take the font colour from 
the page logo (#003333). Click Apply and you'll see 
how your changes affect things before you commit. 
Click OK when you're happy with the results. 


Seco (mme Id | cme) 
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To amend the link behaviours, return to the CSS 

Styles within the Design panel and click the New 
CSS Style button again. This time choose the Use 
CSS Selector option to make the various link states 
available under the Selector options. Find the a:link 
and click OK. 


You can now determine the properties of your 
up-state links as before, except you'll have 
options for various decorations — which we've set to 
none -— associated with the links status. Repeat these 
steps for the a:hover and a:visited states using the 

Photoshop design for their values. 


For the page title, we'll use a CSS class so we can 

apply styles to selected text. Create a new style, 
this time opting for the Make Custom Style (class) 
option and entering the name: .title. Click OK to once 
again format the font details before clicking OK to 
return. 


You can now select text directly on the page and 

click your newly created CSS class to determine 
its appearance. Experiment with other CSS styles and 
take a look at the final style.css file that we developed 
for the site. And that’s it. You're finished! 


Creative Collection 2003 | 153 


Flash MX 2] 


WEB DESIGN 


FLASH MX 
FOR ARTISTS 


It’s already the leading 

tool for producing superb 
animation and interactive 
Websites, but more people 
are turning to Flash MX for 
another reason 


Throughout the ages of the Web we've been 
constantly reminded of all the fantastic things 

that can be achieved with Flash, and never has it 
been more true than with the arrival of Flash MX. 
However, since the days of version 1, we've all 
been doing one thing without even realising it, and 
that’s drawing. 

In this respect, Flash MX has so much more to 
offer the digital artist. Once you start looking at it as 
an illustration tool, you'll often find yourself using 
Flash alongside dedicated favourites such as 
FreeHand and Illustrator. The Pen and Brush are 
easy to use, and the Subselection tool helps fine- 
tune vector shapes to perfection. A creative use of 
layers, symbols and bitmap controls also leads us 
on the way to producing stunning artwork for Web 
or print. 

So whether you're an illustrator looking to make 
your first exploration into Flash, or an old hand 
keen to stretch the app with some new tricks, the 
next few pages will show you how it's done. 


INFO Words and expertise by Jerome Turner, info@jerometurner.co.uk 


ON THE DVD 

ge < Before you start, 
fox | find the folder 

\ —  / 3_flashart_p154 on 
__-_ the DVD and copy 

the source files to your 

desktop for use in the tutorial. 

Flash MX on a Mac running 

OS 9 was used to create 


/ 


this tutorial. 


Create this image in the following tutorial. 
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PART 1 DRAWING 
THE OUTLINES 


We'll start by sketching some 
background shapes / 


LIMPOPO e Sear v7 


Before starting it’s a good idea to alter a couple of 
1 Flash settings. In a new file, turn off View>Snap to 
Objects so you're free to draw as you would on paper, 
without Flash pulling the lines around. If you’re more 
comfortable working with a grid, set one up now. 


2 Import beach1.jpg from the DVD and leave it on 
frame 1, which is where all the content will be 
staying. Create another layer called Outline and use 
the Pen tool (set to Ink) to draw the details of the 
bowler from the photo. Use a light colour for clarity 
over the darker image. 


In two new layers, use the Brush tool (with 

a circular tip from the toolbox) to draw the 
rough shapes of the two other players watching the 
action. Pick a different layer and colour for each, 
remembering that objects become fainter the 
further away they are. 
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Even though these background shapes don't 

need much detail, you can zoom in and use the 
Eraser tool to etch out of the shape. Drawing can be 
as much about taking away as it is adding. 


Turn Snap To Objects back on, select the Line tool 

and create a new layer. Draw the groove in the 
sand, with all the points snapping together to form a 
polygon. You can change the shape by dragging the 
straight lines into curves with the Arrow tool. 


In anew layer sitting at the bottom of the stack, 

draw an empty box around the stage. Then 
dissect this with more lines, creating closed areas 
depicting the edge of the sea and the horizon. Finally, 
make the Photo layer invisible to view your progress. 


PART 2 COLOURING 
AND SHADING 


Next, tidy up and clear some space 


The layers are building up now, so it's time 

to organise things. Group each of the two 
background figures so they can’t interfere with each 
other. Cut the figure in the person 2 layer and paste in 
place in person 1. Rename person 1 and delete the 
empty layer. 


It's often useful to make room on the timeline 

by holding related layers that won't be used 
regularly in Flash MX's new Layer Folders. Click on 
Insert>Layer Folder, then drag and drop each layer 
inside, excluding Outline; we'll be working on that 
one shortly. 


Before honing in on the details, it’s a good idea 

to fill in some of those empty spaces created in 
the background layer. The photo layer is still useful 
as a reference. You can pick out colours with the 
Eyedropper tool, then use them to fill your shapes. 


1 To emulate the colours of early evening 

shadow on the sand, you'll need a Gradient fill. 
In the Colour Mixer panel, pick Linear, then alter each 
of the colours on the horizontal slider. When you see 
the + sign by the mouse, you can also click to add 
more colours. 


1 Fill the ‘beach’ shape in the background layer 

using the new Gradient fill. It needs some 
adjusting, so pick the Fill Transform tool and click on 
the filled shape. The above image shows the three 
handles for the fill, enabling you to change the centre, 
rotation and size. 


12 Now let’s get to work on the main bowler. Use 
different colours to fill the shirt, trousers and 
skin tones, perhaps selected from the photo again. 
Next, copy and paste in place the fills as one into a 
new layer above outline. This will enable you to add 
some shading. 


Start using the Eraser to rub away at the 
1 shading layer (make sure all other layers are 
locked first), leaving the shadows remaining. Feel 
free to use the photo as a guide, while viewing the 
shading layer as an outline so you can see what 
you're doing (see the timeline controls). 


F] 
Tal eect Ty | 
1 Change the colour of the shading so it’s a grey 

block and Convert to a Graphic Symbol. Then, 
in the Properties bar, change the alpha of the shading 
until it blends well, over the main image, darkening 
the actual colours as a real shadow would. 


1 You can use a different shading style for the 
background figures. In a new layer called 
‘mask’, placed above the people layer, use the Brush 
tool to paint on shaded areas. As this is background 

imagery, don't worry about being too neat. 


} BO BM 5 120% Os 


1 In another layer between people and mask, 
6 draw a set of lines (use Copy, Paste and the 
Align panel to space them evenly). This could in fact 
be anything from spots to a scribble; the idea is 
simply to create a texture for shading. 


PATTERNS 

Repetition and patterns can be easily created in Flash MX, 
which is good news as they're often useful for 
communicating ideas. Build a library of graphic symbols 
that you think you're likely to reuse and align them on the 
stage as necessary. Don't forget the other manipulation 
tools, such as Free Transform. You can create a sense of 
Perspective by showing smaller instances of a repeating 
symbol appearing in the background. 


MIX AND MATCH 

While Flash MX is useful for the creation of certain 
graphics, don’t forget your other tools such as Photoshop 
and Illustrator. Some of the best results come from 
dragging content from one app into another and then 
continuing. Make sure you're using the right tool for the 
job though, because it’s easy to get distracted. 


1 Now make the mask layer into just that, 

showing only the lines where the shading was 
applied. At this stage you might like to Test Movie as 
an SWF, but remember that you'll also see the photo 
layer, so turn this into a guide layer first. 


1 It’s time to clear up the layers again. This time, 
re-organise the content in folders according to 

where it appears in the picture: one for the bowler, 

one for the people, one for the background graphics. 


SOURCE 
PHOTOS 


Now we'll incorporate photography 
for detail and texture J 


Edit View insert ENITTNI text Contro! Window 


Trace Bitmap... 


To fill out the remaining top space, use sky.jpg 
1 imported to a new layer at the bottom of the 
background folder. You can reduce the amount of 
detail (and end filesize) with Trace Bitmap. It acts like 
acleaner, stylised version of Photoshop's Posterise. 
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2 Place the shells.jpg in a new layer just above 

the background layer. If you then Modify> 
Break Apart the photo, it’s possible to remove 
selections from the image. Copy the outline for the 
beach shape, paste in place over the photo and delete 
the bits you don't need. 


21 Next, convert the shells into a graphic symbol, 
then reduce the alpha to 30 per cent, merely to 
suggest a texture laying over our original beach 
shading. In Flash, you can also Lasso out the hands 
holding the boules from the beach.jpg, then paste it 
back into a new independent layer to generate some 
extra detail. 


FINE-TUNING 


We have the basis of our image, 
but some tweaking is still needed 
to clean itup J 


2 Delete the orange outline of the bowler, then 
copy and paste the whole shape in Outline 
into another layer underneath. 
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23 Select the shape in the new layer and Modify> 
Shape>Expand Fill by 4 pixels. Convert to 
symbol and change the brightness (in Properties) to 
form a glowing outline. The shade around the edge 
always relates to the colour in that part of the bowler. 


2 The two people can be simplified to ensure 
that they remain background elements. 
Ungroup them so they're editable on the stage and 
pick two colours that are more suited to the overall 
balance of the image. Select both shapes and 
Modify> Straighten to create a different stylistic twist. 


2 On doing this you'll notice some corners are 

a little harsh. Zoom in and click on the edge 
of the subject with the Subselection tool. Select the 
offending corner point, then Alt-drag (PC) or 
Option-drag (Mac) to convert it to a curve point 
with drag-able handles. 


MAKING AN IMPRESSION 


Your illo need not always strive to be overly 
complicated or realistic. The clean lines and bold 
images of Flash make clear impressions, great for 
communicating ideas as seen in editorial artwork, 
logos, Web icons or T-shirt design. The drawing 
and editing tools enable you to make dramatic 
changes to your work in just seconds; useful 
when time is tight. 


2 Delete the outlines of the beach edge and 

horizon. Fill the marker shape with gradient 
as before and adjust using the Fill Transform tool to 
show the shadow of the groove in the sand. Delete 
the outline, convert to a symbol and darken a little 
so it shows up through the shell layer. 


FINAL STEP 


To save your work, go to File>Export Image and pick 
a file type relevant to the use of your illustration. 
You've explored a vast range of possibilities here 
with Flash MX, but there are many more. Next time 
someone tells you Flash is an animation tool, tell 
them otherwise... 


' 
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DREAMWEAVER 


Creating links in Dreamweaver that generate 
pop-up windows with specific attributes isn’t as 
difficult as you might think. Here’s how to use 
Behaviours to generate the effects you’ re after 


his issue comes up pretty 


; bl 
SHORTCUTS 


This isn’t entirely wrong, but what 
can add frustration is that a link is 
created around some text to generate 
the link pointing to the same location 
as the pop-up. This not only results 
in the pop-up being generated, as 
expected, but also refreshes the main 
window to the same location. To get 


around this problem, create a link, 
but in the Link Location field, enter 
the hash symbol (#) to create an 
empty link. 

This way , the HTML won't go 
anywhere, but the Dreamweaver 
Behaviour will trigger the pop-up 
window as you intended. [| 


regularly in one form or 

another on the Computer Arts 

Forum site, but fortunately the 
solution is straightforward enough. 

The whole process is controlled 
through JavaScript, because the 
amount of information required to 
carry out the effect is impossible 
through simple HTML. Dreamweaver 
labels JavaScript as Behaviours 
and provides the Open Browser 
Window action found in the 
Windows>Behaviours palette to 
create the effect. 

This action enables you to specify 
the properties of the new window, 
including its size and attributes — 
whether it is resizable, has a menubar 
and so on~—as well as a unique name. 
The unique name is an important and 
often overlooked attribute, because this 
makes it possible for multiple links to 
open and refresh in a single pop-up, 
without creating a mass of windows 
which soon take over your desktop. 

You can apply this action to images 
as well as links. Indeed, it’s particularly 
useful for creating pop-up windows to 
display larger versions of thumbnail 
images, or when you want to display 
contextual reference notes in a smaller 
window, without disrupting your flow 
in the main page. 

We've outlined the necessary 
steps on the right, so you can see the 
process involved, but the main issue to 
consider is the kind of object that will 
prompt the Behaviour. An image is 
quite routine for this, because you can 
select it easily enough, associating and 
configuring the action to it directly. 
However, when it comes to text, the 
most common mistake that new 
Dreamweaver users make - or even 
established design pros who might not 
be too familiar with the code beneath 
their design views — is that they trigger 
this from an existing link. 


WHEN IT COMES TO TEXT, THE MOST COMMON 
MISTAKE THAT NEW DREAMWEAVER USERS 
MAKE —-OR EVEN ESTABLISHED PROS — 1S THAT 
THEY TRIGGER THIS FROM AN EXISTING LINK 


THE OPEN BROWSER WINDOW ACTION 


Semendous tate and Woity 
SUNDAY TI 
d {buy this CO} 


: EER srostaxovicn chamber Music 
"4 


: TOHAIKOVSKY / BRI 
Btring Quartets 


Create an empty text link using the hash (#) symbol 
and place the cursor within the link. Click the 
Behaviours panel + symbol and select the Open 
Browser Window option. Locate the required file 
and enter dimensions for the width and height. 


<) URL bo Diephay: | britteryindex.titm 


Window vit: 09 Viidow Heght: 0 
Attributes: (] Mavigsten Tod ((] Menu Bar 


| ee | BEETHOVEN The Opus 16 Project 
Leaving objects like the Navigation, Location, Status 
and Menu Bars deselected disables these features 
in the new window. You might want to activate the 
scrollbars if necessary, but leave the Resize Handles, 
because these enable users to resize the window. 


WOHAIKOVSKY / BRI 
3} String Quartets 
i he Tames, Apr 2002 


| 


[URL to Display: | boittensindex. htm 
q Window Width: S00 Window Height: 300 | 
Atwtaaes: (] Neigaten oor] Meru te 
C1 tecstion Toate «= scrobare as Meeded 
DO Steuer CO Resize Handies | 


{ JCMAIMOVSKY / BRITTEN 
2 Sting Quectats 


And don't forget the Window Name field. If you 


Click OK to return to your main page and make sure 


provide a common name for a number of similar 
links, then any other pages loads into the existing pop-up 
and refresh the content. This avoids a common mistake, 
ensuring multiple windows aren't generated. 


the event for the action is set to onClick in the 
Behaviours panel. Test in your browser and the link 
should now generate the pop-up window, leaving the 
original page unaffected. 
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© mm 3D techniques 


BUILDING 
A ROBOT ARMY 


You've seen what the finished result 
could look like — now try it for yourself 
with our expert tutorial 1 


Start off with the following sphere: 100 radius 

32 segments. Rotate it so its poles are facing front 
and back. Right-click the geometry and convert to 
Editable Poly. In Polygon Sub-object mode, select 
the rear of the sphere and delete the selected 
polygons. Select a ring of front faces and extrude 
slightly as illustrated. Select any sharp edges and 
chamfer them in Edge Sub-object mode. 


Ensure the centre of the hemisphere has enough 

segments leading to its pole by chamfering 
(rounding off) any existing ring edges to help refine 
the curve to the pole’s point. Draw a pattern in Edge 
Sub-object mode to create the panel illustrated. 
Chamfer slightly to create the wider segments and 
chamfer again to create the side segments. 


Enter Vertex Sub-object mode and target weld 
any wayward vertices. You may need to create 
new edges around the right-angles of the ones you've 
already created. Unless these are sorted out now, 
later refinement will pinch and deform the mesh. 
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RAY OF LIGHT 

If the default Light Tracer settings aren't adequate 
enough for you and the global illumination comes out 
grainy, try upping the Rays/Sample spinner to around 
400 and increase the Filter Size slightly. This adds 
more quality to the end render, albeit at the expense 
of render times. 


ON A RENDER 

If you find the render is taking too long, try reducing the 
number of iterations in the Meshsmooth modifier(s). 
This speeds the process up by reducing the number of 
polygons in your scene. Bear in mind, though, that as 
the Meshsmooth irons out the low-polygon detail, 
sharper edges may be visible at print resolution. For 
those smoother curves, you'll just have to put up 

with longer rendering times. 


Select all the inner polygons of the newly created 

edges and negatively extrude to create an 
indentation. Chamfer any sharp right-angled edges 
created by the extrusion, as shown. Select the inner 
polygons around the pole of the geometry and 
extrude outwards slightly. Extrude again, ever so 
slightly, and use Outline to create a lip. Extrude twice 
and negatively Outline to taper the polygons a little. 


Select the inner ring of polygons around the pole 

and extrude back to create an indentation. 
Deselect the outer polygons and extrude outwards, 
then deselect again and extrude inwards. Create 
double polygon extrusions, as shown, on the two 
inner extrusions; this keeps the mesh tighter when it 
comes to refining the geometry later on. 


Create another sphere with the same settings as 
before and rotate it so a pole is facing up. Select 
the top four polygon segment rings and extrude 
outward. Now select the outer edge and chamfer 
it to remove any harsh edges. Delete the bottom 
polygons so an extruded ring remains. 


Delete the top two rings of polygons, then 

chamfer the middle ring of edges to create three 
polygon rings where once there were two. Select a 
cross of edges and chamfer them. In Border Sub- 
object, select the inner border and chamfer. Select 
the inner border again and collapse. Now select the 
outer polygons of the three rings and extrude. 


Chamfer the inner collapse vertex to create a ring 

of polygons, then chamfer the edge ring slightly 
to create an additional polygon ring. Now select the 
ring of polygons and extrude, as shown. Due to the 
chamfering of the collapsed vertex, you may need to 
target-weld any vertex irregularities. 


Select one quarter of the geometry, including the 

centre circle and inner extrusions leading up to 
the centre ring, invert the selection and delete the 
rest. Select the harsh corners of the geometry and 
chamfer them as illustrated. 


10 Close all Sub-object selections, add a 
Symmetry Modifier, then rotate the Gizmo 

to mirror the geometry. Add another Symmetry 
Modifier and rotate the gizmo to complete the 
geometry — making it whole again, but repeating the 
chamfered edges around the geometry, as intended. 


1 1 The large top faces will pinch when refined, so 
delete them. Border select the top inner outline 

and chamfer it slightly. Select the inner border and 

collapse to bring the border selection to one point. 


1 Create another sphere with the same settings 

as before. Add a Slice modifier and rotate its 
Gizmo 45 degrees so it cuts the sphere diagonally 
when viewed in the Front Viewport. Check on 
Remove Bottom. Add another Slice Modifier and 
perform this operation another three times, rotating 
the Gizmo 90 degrees each time. 


3 Rename the sliced sphere still selected ‘Side 

1 Panel’ and clone it by selecting Move and Shift- 
clicking. Copy and rotate it, so it’s facing the left-hand 
side. Perform this operation again with the top sphere 
(the ‘Socket’) and rotate this so it's over the top of the 
copied Sliced sphere. Taper the geometry as shown 
and extrude the middle polygons further back. 


14 Create a cylinder and label it ‘Head’. Set the 
Radius to 30, Height to 40, 3 Height Segments, 
1 Cap Segment and 18 Sides. Collapse to Editable 
Poly and reposition the vertices so they line up. To 
create the curve at the top, select a ring of vertices 
and scale then using Uniform Scale. Apply this to 
the other vertices to create the dome shape shown. 


1 Select the Top Panel and rotate-copy it so it’s 

repositioned and facing down. Select the side 
socket and copy-uniform scale it. Now rotate and 
reposition it. If you want, change to Local Reference 
Co-ordinates to reposition the smaller socket, moving 
it along the z-axis in User or Perspective view. 


18 In the Left Viewport, create a cylinder with a 
Radius of 20 and a Height of 10. Set the Height 
Segments to 1 and 18 Sides. Reposition it as shown, 
so it sits nicely in the Booleaned section of the Head 
geometry. Scale as necessary so it’s a snug fit. Select 
the cylinder’s side edges and chamfer them slightly. 


Sy Se SSE 


1 Create a box Length 80, Width 10 and Height 
5 80, and position it so it intersects the ‘Head’, as 
shown. Select the Head and create a new Boolean 
Compound object. Select the box as operand B and 
ensure Subtraction (A-B) is selected. 


—e 


16 Collapse to an Editable Poly. Target-weld any 
floating or mid-polygon vertices from the 
Boolean to clean up the geometry. Now select the 
new edges created and chamfer them to remove 
any offending harsh edges. Again, weld and/or 
clean up any wayward vertices where necessary. 


1 Collapse to an Editable Poly and select three 
other polygons. Inset these polygons a little 
and extrude outwards. Inset slightly again and 
extrude back to form three tube-like structures over 
the cylinder, as shown. Create another cylinder and 
reposition it on the side of the head, near the top. 


2 Add an Edit Mesh Modifier and select the top 
polygon. Extrude slightly and uniform scale 
inwards to create a rim set of polygons. Extrude back, 
extrude slightly again and uniform scale to create an 
indented rim. Repeat until you have the shape shown. 
Instance clone this to the other side of the head. 
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Create another cylinder (or clone the previous 
2 one), delete the existing Edit Mesh Modifier 
and add a new one. Create ledges and negative 
extrusions as before to set up the basic geometry. 
Now build a set of polygons in the centre, as 
illustrated. Select the centre vertex and use Soft- 
selection to create a slight bulge when you move 
the centre vertex outwards. 


2 Bring up the top geometry positioned just 
under the head. Select polygons on the side 
of the curved surfaces in whatever pattern you see 
fit (a two-to-one repeat is illustrated here). Inset these 
slightly, as shown, extrude back, then extrude the 
centre polygons at the top back into place. Otherwise 
the head will intersect when you rotate it later on. 


2 Apply this same operation to the Side and 

Front Panels to add extra detail. Additionally, 
tweak the geometry by either selecting and deleting 
(or selecting and adding a delete Mesh Modifier, as 
shown) or by scaling the centre vertices (shown on 
non-selected object). 
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COSMI(ET)IC SURGERY 

You needn't stop being creative once you've finished 
this tutorial. Why not add more detail to the robot? 
How about communications antennae, pipes, 

Or even a completely new head? 


5 ea tt 

2 You need to scale and/or delete polygons to 
prevent the two objects intersecting. The front 

geometry is too big, so delete the outer polygons, as 

shown, then chamfer the outer Border selection and 

scale the Border inwards. Again, chamfer any sharp 

edges you feel need softening up. 


2 The rear panel is relatively simple. Clone 
another panel and rotate it so it’s at the rear of 
the bot. Select the complete inner polygon rings, 
extrude back and inset significantly. Extrude again, 
inset slightly and extrude back. Leave the remaining 
polygons as illustrated. Chamfer any pointed edges. 


| Serer Ra 

26 To create the rubber seals, select Borders 
from the top panel and extract an appropriate 

shape. Make the object renderable, amend the 

thickness to about 4, then rotate-clone around the 

geometry, as illustrated. Using the same method, 

create seals for other vital robot body parts, such 

as the sockets. Repeat as required. 


2 Create the arm joint with a new sphere —- 
simply select one of the poles and extrude 
out. Extrude again and position against the socket. 
Then extrude outwards, inset and extrude the 
outward-facing polygons to form a ‘ridged’ surface. 
Use a similar method to create the leg socket, again 
chamfering and extruding to sculpt the right shape. 


2 To create the forearm, clone the arm joint, 
then rotate and reposition it. Now delete the 
end polygons and create the new elbow socket by 
chamfering, extruding and scaling the new polygons. 
Create the forearm and cannons in a similar fashion. 
Scale the forearm polygons (excluding the end ones) 
until you have the shape you want. Now sculpt the 
cannon by extruding and insetting the end polygons. 


2 For the mouth ‘display’, select the relevant 
polygons, then inset and extrude back as 
necessary. Refine the edges by chamfering and 
cleaning up any unwanted polygons. Finally, extrude 
the base of the head down slightly to create a slight 
ledge. The foot thruster is a modified clone of the foot 
socket, repositioned and refined using extrusions and 
insetting by polygon to create the bottom detail. 


30 Create a new material and set the shader to 
Multi-Layer. Now lock the Ambient and Diffuse 
colours and select blue. Set the First Specular Layer 
Level to 300 and Glossiness to 90. Set the Second 
Layer Level to 20 and Glossiness to 0. Add a Fall-off 
map to the reflection slot, then add a Raytrace map to 
the Fall-off map’s Side slot. Assign this to the whole of 
the robot's body geometry. 


Create the bottom plate geometry from 
3 another side panel. Now sculpt the initial run 
between the legs by creating edges along the desired 
route. Afterwards, extrude the polygons along the 
middle and target-weld the outer vertices to create a 
smooth bulge. Use the Symmetry Modifier to 
perform the same operations on the other side and 
the rear of the geometry. 


Copy the Multi-Layer material and label and 
3 colour it ‘Grey’. Select the forearm and, in 
Polygon Sub-Object mode, select the polygons you 
want to assign this material to. Apply the material, 
or other if desired, to this and any other elements or 
inset extrusions as you see fit. Create materials for the 
eyepiece and ears and assign them accordingly. 


Ts eae. ae m a 
3 With all materials and sub-object materials 
assigned, you can now refine the robot's entire 
geometry. If you've done it correctly, adding a simple 
Meshsmooth Modifier should smooth out any 
object's rough edges and not result in pinched or 
wayward geometry. For objects that have sub-object 
materials, check on Separate by: Materials in the 
Meshsmooth’s Surface Parameters section. 


3 With all refinement sorted (for Viewport 

update speed, use Meshsmooth’‘s Render 
Values instead of normal Iterations), you can now 
pose your robot more dramatically. However, to 
position the limbs correctly, you may need to amend 
the geometry’s pivot positions — to do this, enter the 
Hierarchy tab, click on Affect Pivot Only and move the 
pivot point to where the object should bend. 


WEATHERING 

Add textures and/or weathering to the robot by mixing 
the base material (the reflective plastic/spray-paint 
material) with other types, such as plastic, rusted 
metal, decals, warning chevrons, etc. To apply these to 
the model, add additional UVW maps to the geometry 
{for positioning), then use a Mix material to blend the 
two types together with the help of a mask. 


POSING 

If you're up for the challenge, try adding a waist that 
the leg sockets are linked to; posing the figure would 
be much easier if you did this. Additionally, if you want 
to pose or animate your robot, you'll need to explore 
3ds max 5's character toolkit and IK system. 


3 Try bending the forearm and see how it now 

pivots correctly. However, if you try bending 
the top of the arm, the forearm doesn't follow suit. To 
sort this out, select the forearm and link it to the top 
of the main arm. Similarly, link the top of the arm to 
the arm’s socket joint. Repeat this procedure with the 
foot and leg accordingly. 


3 To create the thrusters, whip up a simple 

cylinder, position it, then remove the top and 
bottom caps using an Edit Mesh Modifier. Now add a 
UVW map and set to Cylindrical. Scale the UVW 
map’s height slightly. Create a new material, check on 
Two-sided and assign it to the thrusters. Add a Fall-off 
map to the Self-Illumination slot. Now Instance-copy 
it to the Diffuse Slot. 


eae ss £ ests esd 


7 Change the Fall-off’s front slot to a Gradient 
3 Ramp map, with a gradient as illustrated and a 
W angle of 90. Set the Fall-off map’s second slot to a 
blue colour. Add a Gradient Ramp map to the Opacity 
Slot and change the W angle to 90. Afterwards, 
design a gradient going from white to black (two 
black keys, one at 90 one at 100), left to right. Taper 
and link the thrusters to the feet and pose the robot. 
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3 3ds max 5 features a very simple global 

illumination system. Create a Standard 
Skylight light and position it anywhere in the scene. In 
the Rendering menu, go to Advanced Lighting and 
select Light Tracer. There are no hotspots, indicating 
there is no main light, so create an additional Direct 
light with Diffuse checked off and Shadows on to just 
emit a hotspot. Tint this light slightly yellow. 


3 Right-click on the thrusters and select 

properties. In the Adv. Lighting tab, check 
on Exclude from Adv. Lighting Calculations. Render 
off on a white background as a 32-bit TGA at 
2740x3307 for print resolution. 


ART 2 INTO 
PHOTOSHOP 
At first there was one, then another, 
then another, then... 1 


Bring the rendered image (or the pre-rendered 

bot_rendered.tga supplied) into Photoshop 7 
along with the Bot_background_layers.psd and 
bots_toon.psd files. Copy the masked rendered robot 
into the Bot_background_layers.psd canvas and 
position it to the right and make it the top layer. Drop 
in the toon-shaded robots and place them behind the 
rendered robot. 


170|Creative Collection 2003 


NSS esa cemmowese ere Sale Gees (pee. (gee een OLED 
Load in the bots_5.psd and position it behind 
41 the rendered robot. Change the blending type 
to Overlay. Load 3ds max §s selection by Control- 
clicking on the layer, create a new layer and stroke the 
layer with a white line of 16 pixels. Clear the selection, 
clone the layer and set the copy’s blending type to 
Colour Dodge. Gaussian Blur the copy with 15 radius. 


Load the robot's selection and outside-stroke 

the result on a new layer. Clear the selection, 
add a layer mask and mask out the stroke around the 
thrusters using a gradient. Copy the stroke layer and 
Gaussian and Colour Dodge as before. Load the 
robot's selection and expand it by 50. Fill the selection 
white on a new layer, then duplicate this across the 
background to create the cloud shape. 


Link/merge these cloud shapes and set 

Opacity to 50 per cent. Position behind the 
boxes layer. Centre-stroke these clouds on a new 
layer with 8 pixels’ width. Clone the stroke layer twice 
and position as shown, changing the Opacity of the 
first copy to 75 per cent and the second to 50 per cent. 


Load in the bots_grid.psd and paste the layer 
behind the boxes layer. Set to Overlay, Clone 
and Gaussian slightly. On the bot layer, Magnetic 
Lasso-select the thrusters and copy and paste to a 
new layer. Set to Colour Dodge and merge back 
down. Blur the thrusters using either the Blur tool 
or a Gaussianed, feathered selection. 


FINAL STEP 


And here's our final image. As you can see, using 
3ds max and Photoshop hand-in hand really pays 
dividends. And while 3ds max provides competent 
out-of-the-box solutions, with a little imagination, 
mixing materials together and so forth, you can 
create work that’s equally impressive. |_| 


3DS MAX 


Create realistic caustics 
(special light effects) in 
3ds max 5 without using 
a plug-in. Yes, you can... 


Caustics are particular light effects 
caused by transparent materials, 
such as glass. When creating realistic 
caustics in 3D packages, it’s easy to 
see why people go along the 
third-party plug-in route. Nine times 
out of ten, it’s just a simple case of 
setting a couple of values and clicking 
render — not much skill is required and 
effective results can be achieved quite 
easily. But while these can look good, 
render times suffer as a result, 
stretching between an acceptable 
few minutes to several hours. 

Not long ago, we had to be content 
with faking these caustic effects using 
volumetric lights (for volumetric 
caustics — caustic effects in fog) and/or 
projector maps of the object's specular 
information from the key light source, 
assigned to a duplicate light to cast a 
bright projected light only onto the 
relevant surfaces. 

With 3ds max 5, the introduction of 
Light Tracer and Radiosity advanced 
lighting systems changes the game 
slightly. Now you can produce real 
reflective caustics (like you get from, 
say, contoured metal surfaces or 
water), although you still have to fake 
refracted caustics. So what's changed? 
Well, now Light Tracer can bounce 
light off surfaces, and allows for the 
tinting of this light to simulate radiosity. 
By increasing the specularity in the 
object’s material, we can increase 
the intensity of the bounced light. 

For example, with a curved surface, 
this light can form at a focal point, 
and as light is additive, a more 
intense point of light is visible. 

However, with a standard Blinn 
shader set-up, our bounced light is 
blurred and unfocused. The way 
around this is to use an Anisotropic 
shader, because this focuses the 
bounced highlight. While this can 
produce an effective caustic, getting it 
right means sacrificing the designed 
(normal) specular settings, that can 
make the material appear different to 
what we had in mind. 


NOW YOU CAN To solve this problem, use a 
PRODUCE REAL Multi-Layer shader. This incorporates 
REFLECTIVE two different specular highlights. One 
CAUSTICS LIKE YOU highlight can be designed as normal, 
at PO RER AE TAL and the second set to a small, intense 
SURFACES OR WATER highlight with anisotropy. Both should 


be tinted as necessary. When 
rendered, the first (larger) highlight 


ey: 
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will occlude or white-out the intense 
highlight and the caustic effect will be 
generated and displayed correctly. 
For effective results, we can use 
raytraced reflections. This adds to 
the render time but produces a 
convincing effect. 
INFO Expertise supplied by Pete Draper. 


Find the files ca_caustics_start. max and 
1 ca_caustics_finished.max on your DVD, in the 
folder 4_minimax1_p171. Open ca_caustics_start.max. 
This is our basic scene for which we're going to generate 
the caustic effect. In the top Viewport, make a spotlight. In 
the left Viewport, amend its position so it's situated above 
the rings. Turn Shadows on and set to raytraced. Check on 
Overshoot in the Spotlight Parameters. 


Select the ground plane and open the Material Editor. 
Assign the first material to the plane. Label the second 
material ‘Gold Ring’ and assign it to all the rings. Change 
the shader from Blinn to Multi-Layer. Take the Diffuse Level 
to 0. Set the First Specular Layer colour to RGB 218,195, 
166, Level to 500, Glossiness to 70 and Anisotropy to 75. 
Copy the first specular colour swatch to the second, then 
set the second's Level to 150 and Glossiness to 20. 


In the material's Reflection slot, add a Raytrace map. 

As we haven't got much of an environment to reflect in 
our scene, we'll add an extra one with our materials so it 
not only reflects the object, but also an environment map. 
Add a bitmap map to the Raytrace map’‘s Background slot 
and load in Lakerem2.jpg (which comes with 3ds max 5) in 
its Maps\Reflection folder. Set to Spherical Environment 
mapping and set the Blur Offset to 0.05. 


Enable Light Tracer in the Advanced Lighting window. 

Leave all settings as default for the time being, but 
change Bounces to 1. Render the scene. You should now 
notice the caustic effect generated by the light. Increasing 
the Light Tracer Rays/Sample setting will sharpen this up 
at the expense of render times. You may also want to 
tweak the sharpness of the anisotropic highlight in the 
Material Editor to refine the image still further. 
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Cinema 4D R8 Xpresso me 


3D ANIMATION 


CINEMA 4D 
R8 XPRESSO 


Try out Cinema 4D's 
fantastic expressions editor, 
with our demo of R8 


Cinema 4D R8is a simple package for creating 
stunning 3D content. One of its most useful 
features is Xpresso, a superb tool for generating 
relationships between objects. It’s probably 

the new iteration’s biggest single feature. 
Unfortunately, it’s also likely to be the one users 
neglect the most. After all, unlike the interface 
features, modelling tools and enhanced 
animation, it’s not immediately apparent what 
Xpresso can do. And it can do an awful lot. 

This tutorial takes you through the Xpresso 
workflow and shows you just how simple it is to 
use. Creating your own Xpresso expressions is 
no more difficult than mastering drag-and-drop. 
Don't believe us? Then try it for yourself. 

COFFEE, Cinema’'s previous incarnation of 
expressions (still available in R8) was very good 
if you didn’t mind a bit of maths and scripting. 
For most of us it remains an unfathomable 
curiosity, suitable for high-end animators and 
programmers. Xpresso offers a graphical 
approach that us mere mortals should find much 
easier to get to grips with. The tricky part is 
understanding which nodes to use and why. 

With this in mind, we'll take you though a 
series of Xpresso scenes, from the simplest 
possible expression to some fairly complex 
linkages. In this way, you'll learn how the most 
common features and nodes work, what's 
possible with Xpresso and how it can save you 
so much time and effort. With a little ingenuity, 
you'll be able to create your own expressions 
in notime. 


ON THE DVD 
You'll find example 
files, along with a 
save-disabled trial 


on the DVD in the folder 
4 cinema4d_p172. All images 
are for personal use and 


Simon Danaher. 
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GETTING STARTED 
Xpresso isn’t as hard as you 
might think—and here's why J 


Xpresso aims to make expressions simple, 

and, by and large, it succeeds in doing just that. 
We'll begin with the simplest of Xpresso expressions, 
so create two primitives, say a sphere and a cube, 
and move them apart slightly. 


Command/Ctrl-click on the sphere in the Object 

Manager and choose New Expression>Xpresso 
Expression to bring up the Xpresso Editor. Now drag 
the sphere and cube into it from the Object Manager 
to create two object nodes. 


Each node has an Input (blue, left) and an Output 
(red, right), but at the moment these ports are 
undefined, so we need to add a specific type to each. 
From the sphere’s Output menu (the red block), 
choose Co-ordinates>Position>Position Y. 
From the cube’s Input menu, again choose 
Co-ordinates>Position>Position Y. Now connect 
the nodes by dragging from the sphere’s Position 
Y output port to the cube’s input port. Now, if you 
move the sphere in Y, the cube moves too. 
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THE BASICS 

Xpresso is a node-based expressions editor, 
and for those who don't know, an expression 
is a relationship between objects within your 


X, YANDZ 

Note that the cube is locked to the Sphere’s 

Y position, so if you try to move it in Y, it won't 
budge. However, none of the other motion 
channels are affected, so you can still move 
it in X or Z, or scale and rotate it. The effect is 
like creating a partial parent-child relationship 
that only affects one motion channel. 


PART 2 GETTING 
MORE INVOLVED 
You can use Xpresso to connect 
unrelated properties J 


The wonderful thing about Xpresso is that 

you are not tied to linking inputs and outputs 
of the same type. Let's look at what else you can 
achieve. In the sphere’s Output menu, add a 
Co-ordinates>Position>Position X port. In the 
cube’s Input port, add an Object Properties>Fillet 
Radius port, and then connect the ports together. 


Nothing happens yet, because we haven't 

enabled the Fillet option in the cube’s properties. 
So select the cube in the Object Manager, and, in the 
Attribute Manager, click the Object menu block. Here 
you'll find the Fillet option. Click Fillet to enable it. 
Now as you drag the sphere in X, the cube’s Fillet 
radius changes interactively. Play a little to see how 


the objects interact. See the file Fillet.c4d on the DVD. 


Just to show you once more that it's possible 

to connect totally unrelated properties, we'll 
use the sphere’s Z position to control the cube 
material's colour. Add a new material in the Material 
Manager and apply it to the cube. Drag this material 
from the Material Manager into the Xpresso group 
window. The Node will be called New.1. 


Add a Colour>Colour>Colour B port to the New.1 

material node's input. Add a Position Z port to the 
sphere node's Output and connect the two. Now 
move the sphere in Z. Notice that it takes a minute 
movement of the sphere to change the colour of the 
cube, making it difficult to control. 


To alter this, Click the X-Pool tab. Here you'll find 

all the different nodes. Go to System Operators> 
Xpresso>General and add a Constant node by dragging 
it into the Group view. Do the same with a System 
Operators>Xpresso>Calculate>Math:Add node. 


‘ 
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PATTERNS CONFUSED? 
We've taken the output of the sphere’s Position Z 
Port and divided it using the Math node, but with 

a constant value. The result? You now have to shift 
the sphere much further to change the cube’s colour. 


Connect the Position Z output of the sphere to 

the first (upper) input port of the Math node, and 
the Constant to the second input port. Connect the 
Output to the cube’s Colour B input. Select the Math 
node, and in the Attribute Manager set it to Divide 
mode. Select the Constant node, then try out some 
values in the Attribute Manager. We ended up using 
500. See Math.c4d on your DVD. 


PART 3 CREATING 
READ-OUTS 


There may be a time when you need 
to see values of an object quickly 1 


Using Xpresso, you can build interface 
1 elements that provide live, on-screen 
feedback of object property values. Very useful. 
Add acone to the scene, then a text object. Now 
add an Xpresso expression to the cone. 


1 Parent the text to the cone in the Object 

1 Manager. Now drag the cone and text object 
into the Xpresso panel. Add a Position Y port to 
the cone’s output, and an Object Properties>Text 
port to the text object's input, then connect them 
up. Now the text object displays the values of the 
Cone’s Y position in the editor view as you move it. 


1 The text behaves just as it did before, so 

you can create a NURBs Extrude object, 
drop the text into it and get extruded 3D text. 
This is simply to show that adding the Xpresso 
expression doesn't change the nature of the 
objects or impose limits; they behave exactly 
the same as they did before. 


PART 4 ANIMATION 
Xpresso comes in hand when creating 
animations too, of course ! 


13 Let's say you have to animate an object 
travelling through a series of doors that need 
to open as the object passes through. Imagine 20 

to 30 doors, and the animation you'd need to create. 
Now imagine having to change the animation of 
the object, and then having to update all 20 doors 
by hand! Open the file Door1.c4d. 


Here's a much simpler way to achieve the 
1 same results... Open the door hierarchy and 
add an Xpresso expression to the Door2 object. 
Open the Xpresso panel and drag the objects Door2, 
Marker and Sphere into it. Add a Co-ordinates>Global 
Position>Global Position Output port to the sphere 
and marker nodes, and a Co-ordinates>Position> 
Position Y input port to the Door2 node. 


1 Add a Distance node to the Xpresso 
group (X-Pool, Xpresso>Calculate> 
Distance) and connect the marker and sphere 
to it. Connect the output of the distance to the 
Door2's Position input. Unfortunately, if you 
now move the sphere towards the door, it 
moves in the wrong direction, and as the sphere 
moves further away, the door keeps going! 


1 To fix this, add a Range Mapper between 
the Distance and Door2 nodes (X-Pool, 

Xpresso>Calculate>Distance). This enables 

you to control the relationship between input and 
output. Select the Range Mapper and, in the 
Attribute Manager, click the Reverse option. In the 
Parameter section, set Input Upper to 200, Output 
Upper to 1000. Move the sphere to test the result. 


This sets the motion of the door. To stop it 
1 moving too much, though, click the Clamp 
Upper option, then set Output Lower to about 100 
(this sets the closed position of the door). It won't 
go past this point because of the Clamp setting. 
See the file Door2b.c4d. 
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Select the Door hierarchy and choose 
1 Functions>Duplicate. Uncheck the Make 
Instances option and set a value for Z at about 
2000 and the number of copies to 10. Now you're 
free to animate the sphere any way you like, and 
as it comes close to each door, they open 
automatically. See Door3.c4d on the DVD. 


EXTRA CONTROL 


Controlling object components 
and geometry J 


19 Controlling the object properties is one thing, 
but what if you could actually control object 
geometry, too? Well, you'll be pleased to hear you 
can—and quite easily. Here’s a simple example 

that should open your eyes to a whole world of 
possibilities. Open the scene String.c4d from the 
DVD. 


2 The scene consists of a simple three-point 

spline (with an empty Xpresso expression) 
and a sphere. Double-click the Xpresso expression 
tag in the Object Manager to open the Xpresso panel. 
Drag the sphere and spline into it. Now add a Point 
node; rather than getting this from the X-Pool, right- 
click (or Command-click) to view a contextual menu. 
Find it in New Node>Xpresso>General>Point. 
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2 We want to link the sphere’s position to the 
central point in the spline, so first add an 
Object Output port to the spline and link it to the 
Object Input of the Point node. We have to tell the 
Point node which point we want to use, so adda 
Constant node and connect it to the Point Index 
(each point has an index number starting from 0). 


2 2 By selecting the Constant node and changing 
the value in the Attribute Manager, you can 
make the sphere jump to each of the points on the 
spline (0, 1 or 2). Set it to 1, then select the spline in 
the Object Manager and hit Return to enter Point 
mode. Select the middle point and move it; the 
sphere follows along, locked to it by the expression. 
Note that the spline interpolation type is set to Cubic 
so that the spline actually passes through the points. 


2 Add a Circle primitive and an Extrude 
NURBS, and drag the spline into it, then 
the circle, to make a pipe. Reduce the circle’s radius 
to about 4 to create a thin rope-like object. You 
can still move the spline point, even animate it 

using a PLA sequence in the timeline. 


SOPHISTICATED EFFECTS 


Imagine a character grabbing a rope... Link the 
points to nulls and you can place the latter in 

the hierarchy to follow any animation already 
created. For a character dragging a heavy load by 
rope, for instance, you could create an expression 
to make the rope stretch slightly with each tug. 


2 What we can also do is link that point to 
another object and animate that. Add a Null 
object (Object menu) and drag it into the Xpresso 
Group view. Select the Point node and copy and 
paste it to make a duplicate. Connect the Spline and 
Constant nodes, just like the other Point node. 


2 If you click the red Input Port menu on the new 
5 Point node, you can add a Point Position port. 
Add a Global Position Output port to the Null node 
and link the two. Now move the Null - not forgetting 
to switch back to Model mode- and the point and 
sphere will follow along. See String2.c4d on the DVD. 


2 6 Let's take this further. Because we have access 

to objects’ points and their positions, we can 
connect objects so that they deform other objects. 
Open the file Press.c4d from the DVD and have a look 
at the Xpresso expression. 


2 As you move the sphere in Y, it causes the 
plane to deform, yet only in one direction. To 
do this, we've linked one of the plane's points to a 


Null, then driven the Null with the sphere’s Y position. 


Using the Clamp option or a Range Mapper enables 
us to limit the motion in one direction, while the 
Math-Multiply node makes the motion accelerate as 
the sphere passes, compensating for the fall-off 
caused by the HyperNURBS smoothing effect. 


ART 6 CHARACTER 
ANIMATION 


Time to put some muscle into it 1 


2 For character animation, Xpresso comes in 

very handy. By default, R8 doesn’t come with 
any means to provide secondary skin animation, so 
we'll create an expression that will bulge a muscle as 
an arm bends. Open the DVD file Arm.c4d. 


2 Add a Spheriphy deformer and drag it into 
9 the Null Object hierarchy. Now to control its 
behaviour... Add an Xpresso expression to the Null 
object, drag Bone.1 and Spheriphy into the Xpresso 
Group panel. It doesn’t matter which object owns the 
Xpresso tag, unless you're using the Hierarchical 
reference properties of Object nodes. 


3 Select the Cylinder polygon object and enter 
Point mode by hitting Return. Choose the 
Rectangle selection tool and disable Only Select 
Visible Elements from the Active Tool Manager. In 
aside view, drag around the points of the upper 
arm that define the bicep area, then choose 
Selection>Set Vertex Weight, and in the panel 
that appears, click OK for 100 per cent. 


3 Add a Restriction tag to the Spherify object 
(from the Object Manager>File>New 
Tag>Restriction Tag) and enter Bicep in its first slot (in 
the Attribute Manager). Double-click the Weightmap 
tag on the Cylinder object and change its name to 
Bicep —the arm should now be properly weighted. 


The effect of the Spherify deformer is too 
3 great, though. So, using the Restriction tag 
again, reduce the Value field from 100 per cent to 20 
per cent. But it still looks wrong, especially from the 
top: the sides are expanding as much as the top. This 
is easy to fix by editing the weights. Select the side 
point and set their weights to 30 per cent using the 
Selection>Set Vertex Weights command. 


3 Rotating the Bone.1 object, you can see the 

effect is shaping up, but the relationship 
between arm rotation and deformation isn’t quite 
right. Back to Xpresso. Add a Range Mapper to the 
Xpresso group from the Calculate sub-set, then 
connect it between the two Object nodes. 


3 Range Mapper enables you to modify the 

range of values through which an output 
controls an input, and vice versa. At the moment, 
the Spherify strength hits maximum too soon. To 
fix this, we need to broaden the range through 
which the input is working. Increase the Input 
Upper value from 1 to 2 or 3. 


3 Finally, we can re-map the values using a 
spline curve, enabling us to create a non-linear 
relationship between values. Click in the Range 
Mapper’s graph, adding a point at the start and in the 
middle. The end point is dragged up to the Max Y 
value, and the start and middle points to Min Y. Move 
the middle point to the right to create a steep curve — 
this makes the bulge accelerate as the arm bends 
closer. Take a look at Arm2.c4d on the DVD. 
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SHORTCUTS 
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CINEMA 4D XL 


There may not be a rounding tool in Cinema 4D 
but you can build in rounding by hand to achieve 
the kind of photorealistic effect that much 3D 
modelling demands. Discover how to employ 
this manual trick to model slotted screwheads 


effectively and accurately 


The lack of a specific rounding tool 

in Cinema 4Disa limitation but there 
are ways around it. The trick is to build 
the rounding in by hand. It might sound 
difficult but, actually, it’s only a little 
fiddly. Here, we show you how to make 
a realistic slotted screwhead. 

When you Boolean a cube from a 
sphere to create a slotted screwhead, 
you're left with a sharp edge anda 
messy mesh. Begin with a normal 
sphere primitive, reduce its resolution 
so it's suitable as a HyperNURBS cage, 
then convert it to polygons. 


“CINEMA 40 Window 
26 © 


178 | Creative Collection 2003 


PL<NNWLY 
ooo 20% 
a 
m 


=<” 
m 
Ww 


Rotate the sphere 90 degrees in pitch 
so that its poles are on the sides rather 
then on top, and scale in Y to flatten it to 
the right shape. Use the Knife tool to 
cut two slices of extra points where the 
slot should be. Use the Free Selection 
tool to remove the polygons in the slot. 
Now select the bottom of the sphere, 
one row of polygons below the middle, 
and delete these as well. Finally, delete 
the other half of the top sphere, leaving 
you with just a quarter of the sphere. 

Now the trick. Enable 3D snapping, 
set it to Point only and, using a Linear 


spline, click the points along the edge 
of the slot to make a linear curve 
exactly matching it. Draw a 4-point 
linear curve the size you want the 
rounding to be, then use a Sweep 
NURBS to sweep this along the first 
curve. Convert it to polygons, select the 
sweep and the sphere, Connect them, 
then Optimise to join them, creating a 
rounded edge. 

All that's left to do is manual polygon 
editing near the poles, and a Symmetry 
object to make the opposite side. You 
can then convert it to polygons and join 
it to the original using the Bridge tool. 
Throw into a HyperNURBS object and 
you have one rounded screwhead. [_| 


INFO Expertise supplied by Simon Danaher. 
simon.danaher@ntlworld.com 


asove A sphere-cube Boolean subtract results 
in a screwhead that is not suitable for 
photoreal close-ups, because it lacks realistic 
detail: the sharp edge of the slot is impossible 
to round properly in Cinema 4D. 


tert You need to tackle the problem from a 
different angle. We suggest using 
HyperNURBS. By sweeping a Linear profile 
curve along a linear path, you can create the 
round manually, for increased realism. 


nicht Here we've converted the round to 
polygons and connected it to the sphere. 
When smoothed using HyperNURBS, the 
resulting object is a perfectly formed, 
photoreal screwhead model. 


aa 


ROUND 
AND ROUND 


You can apply this sweep 
technique to many different 
situations where rounding is 
required. All you need to do is 
snap the linear path spline to 
the edge you want the round to 
attach to, draw the round curve 
and sweep it. Point snapping 
facilitates this, although it can 
be a bit flaky at times. If you 
have problems snapping to the 
points, try turning off the main 
grid in the 3D views. Remember, 
the lower the resolution, the 
easier it is to create and join 
the round, and the better the 
HyperNURBS object. 
Alternatively, if you do not 
want to use HyperNURBS, you 
can follow the same technique 
using a Linear path spline, 
but this time use a Bézier or 
B-Spline curve for the round. 
The resulting sweep will be the 
final round, so the profile curve 
has to be smooth. 


aime, 
SHORTCUTS 


hen you duplicate an object 
or hierarchy in C4D, you 
end up with two sets of 
data in your computer's 
RAM, both of which are treated as 
independent entities. But doing this eats 
up RAM and makes your scene needlessly 
complex and difficult to organise. 
Instancing is the answer to these 
problems. When you Instance an object, 
a duplicate appears in your scene as if 
you'd made an actual copy. However, 
an Instance is just a reference that points 
to the original data in the computer's 
memory. C4D can read this data as many 


times as you want it to and place copies at 
different locations in your scene — and it 
doesn’t eat up system RAM. 

There are other benefits too. Imagine 
you're building an engineering model or 
vehicle with many bolts or rivets. You 
make one simply as an extruded hexagon, 
and then make copies, moving them into 
position on the model. Later, you realise 
that the bolts don’t look realistic - you 
need to add bevelled edges. It'll take you 
along time to find and select every single 
rivet and change its extrusion properties. 
But if you use Instances, there’s a single 
master rivet from which all copies 
(Instances) can be referenced. Just change 
the extrusion properties of the master and 
all copies update instantly. Simple. 

In C4D 8.1, there are several different 
ways to create an Instance. There’s the 
Instance object command (Objects> 
Modelling>Instance), which, if called while 
an object is selected, will Instance that 
object directly. The Instance is a single 
object in the Object Manager, and the 
object or hierarchy it’s referencing can be 
seen in the Attributes Manager. Unlike 
versions of C4D prior to v8, the Instancing 
system isn’t name-dependent. You can 
mix real duplicates with Instances, create 
objects with the same name and not have 
to worry that the referencing system will 
become confused. 

Changing which object or hierarchy is 
referenced by an Instance object is simple. 


CINEMA 4D 8 


Instances are a huge time-saver in Cinema 4D, 
because they’re in any 3D app that supports 
them, improving workflow and efficiency. We 
sum up the enormous benefits and show you 
how to use them practically in Cinema 4D 8. 


IT ALL HAPPENS WITH AN INSTANCE 


Take a cube and run Duplicate, making sure Create 
Instances is enabled. Here, we've duplicated the cube 
4000 units in X. The first part of our array is in position. 


Group the two groups of Instances once more to make 
a single hierarchy, then Instance using Duplicate. We 
now have a cubic array of cubes, all Instanced. 


Duplicate this row of Instances along the Z axis by the 
same amount. Instances are now referencing a null 
object containing instances that reference the cube. 


If you want to change the object to a sphere, select the 
initial array of Instances, create a sphere and drag it 
into the Reference Object field in the Attribute Manager. 


Just drag and drop the new object from 
the Object Manager into the Instance’s 
Reference Object field in its Attributes. 
Instancing in C4Dis extremely flexible. 
Instances can reference other instances, 
for example, which is useful when creating 
huge arrays of objects. To create a cubic 
array from many smaller cubes, take a 
cube primitive and run the Duplicate 
command to make a series of Instances 
along the X axis. The result is a null object 
containing all the Instances. Select this 
hierarchy and run Duplicate again, this 
time in the Z direction. A further null 
hierarchy is created, each Instance within 
referencing the previous null hierarchy of 
instances. Finally, both hierarchies are 
grouped in another null and Duplicate is 
run a third time in the Y direction. The 
result is a cubic array of instanced cubes. 
You can Instance almost anything in 
C4D, even cameras, giving you a huge 
degree of control over your work. [1] 
INFO Expertise supplied by Simon Danaher, 


simon.danaher@ntlworld.com 
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3D MODELLING 


REALSOFT 
3D 4.5 


For value versus performance, 
it’s difficult to beat the excellent 
Realsoft 3D. Get to grips with 
using the program’s key features 
by following this tutorial where 
we show you how to model 

the dune buggy in the picture 


Realsoft is a mid-range but powerful 3D system with 
comprehensive modelling and shading tools and a great 
raytrace renderer. It represents great value with a lot of 
oomph on offer for your money. Even better, we’ve 
included the full Realsoft 3D 4.5 Special Edition (PC only) 
on the cover DVD. 

The Special Edition has the same structure as the full 
commercial version of Realsoft 4.5 limited only by the 
number of surfaces it can render (30,000), the texture 
resolution (capped at 400x300 pixels) and final output 
size (640x480 pixels). You can, however, render higher-res 
still images to the screen, so if you need bigger output, 
just increase the resolution of your monitor and take a 
screengrab. The best thing is that the program isn’t 
save-disabled, so you can retain all your hard work. 

In this tutorial, we show you how to go about modelling 
this cool, detailed dune buggy using the application’s 
superlative Subdivision Surface, NURBS and Analytic 
modelling tools. Once you get used to the way the 
program works, you should be able to model just about 
anything, given enough time and patience, of course. 

Turn over the page for your complete introduction to 
a fast growing contender in the 3D market, soon to be 
released in version 5. 


INFO Illustration and words by 3D expert and author, Simon Danaher 
simon.danaher@ntlworld.com 


ON THE DVD 
7. The DVD features 
( @_ ) the Special Edition 
of Realsoft 3D 4.5, 
“plus all the files you 
need to follow this tutorial in 
the folder 4_realsft_p180. Find 
more about the program at 
www.realsoft.com. 
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PART 1 THE FRAME 


We kick off by building the dune 
buggy’s frame using NURBS 7 


Realsoft is sometimes tricky to get to grips with, 

but we're still going to dive right in and start 
modelling a few simple NURBS objects for the dune 
buggy. Make sure you have the default layout active 
(Environments>Default). Down the left side, there are 
the view and grid tools. Select Front view, deactivate 
Perspective and enable Input Grid display. Hover your 
mouse over the icons to find out which is which. 


From the Unified tool tab, click the small triangle 

next to the Curve tool and choose Cubic Curve. 
Most tools have further tools and options ina 
submenu like this, plus you can make the current tool 
the default one. Draw an outline for the side of the 
buggy, as illustrated above. Right-click and choose 
Accept to finish drawing the curve. 


Switch to Front view and zoom in a little (use the 

View tools in the toolbar on the right or use Shift- 
right-drag). Select the Circle>NURBS Circle tools from 
the Unified tool tab and draw a small circle. One click 
defines the centre, another the radius. 
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AVOID CONFUSION 

To get rid of the input grid, toggle it off with 

the G key or use the button on the right of the 
interface. Turning Perspective on (* numeric 
key or button) activates a ground grid, but this 
is not used for drawing on. This is one of the 
most confusing aspects of Realsoft, so don’t fall 
into the trap of trying to draw in Perspective. 


RESETTING 


Click the Reset Grid to Native State button to 
reset the input grid to its default position. 
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sje doh into habia bis hs 


From the Transformation toolbar tab, choose the 
Mirror tool. You'll need to hold down two keys 
during the next step — Shift (which constrains rotation 
to 45° increments) and Alt (which creates an instance 

from the selected object). In a Side view (this shows 
the front/rear of our model, since we started drawing 
in the Front view), click to set the point of rotation, 
then move the mouse up to rotate the object. The 
original reappears once you finish the operation. 


Align the circle to the start point of the curve 

you've just drawn. Use Alt-right-drag to rotate the 
view and the handles on the object to move it along 
the x, y and z axes. You can click and drag ona 
handle, or click to highlight an axis, click to start 
moving, and click to end. Select the circle then the 
curve and choose Sweep from the Options toolbar 
that will be displayed. Set the mode to Orthogonal, 
and click OK in the toolbar. 


two halves meet at the front. A quick render 
shows how the model looks at a higher resolution, 
but it’s still a bit choppy. To fix this, open the Surfaces’ 
Properties panel (right-click and choose Properties. ..), 
and in the Spec tab enter a V count of 32. Note that if 
you change the Count on a surface and then edit the 
source curves, it returns to the original values. 


PART 2 SUBDIVISION 
SURFACES 


Creating the buggy’s wheels using 
Subdivision Surfaces modelling 7 


Activate OpenGL view (from the toolbar on the 

right), select the curve and right-click to choose 
Edit from the pop-up menu. Select points on the 
curve and, using the handles, reshape the frame for 
the chassis. When you're done, choose Edit again 
to return to Object mode. Right-click on the objects in 
the Select Window to rename them. See the file 
Frame.r3d on the DVD. 


Save that and create a new document (see the file 
Frame2.r3d). We'll create the wheels next, this 
time using SDS (Subdivision Surfaces). In Front view, 
activate the Input Grid and disable Perspective as 
before. Choose the Circle>Subdivision Cylinder tool 
from the Unified toolbar and enable Snapping. Now 
click to set the centre and once again to set the radius. 


Rotate the view to see that the cylinder has been 
created with a default depth. Enable OpenGL 
and Perspective, and turn off the input grid and 
snapping. We'll now introduce a new way to access 
tools and options — namely, the compass. Right-click 
and quickly flick the mouse; the Compass menu 
should pop up. Choose Edit Faces. 


Select both the front and rear caps of the 

1 cylinder and then drag on the red tips of the 
face handles to scale them up until you get roughly 
the proportions of a car tyre. In the toolbar, you'll 
see the Subdivide option; click that, then click to 
start the subdivision of the faces and release. Now 
drag up to set the inset. It helps to disable Snapping. 
Click again to end the process. 


1 1 Subdivide once more to create the wall of the 

tyre, then again to create an edge. Extrude this 
remaining face inwards, then right-click-drag to 
access the Compass menu and choose Tunnel. This 
connects the two opposite faces to make a hole. See 
file Tyre.r3d on the DVD. 


1 Create another SDS cylinder, but this time 

change the number of points from 8 to 12 in 
the Options toolbar. Subdivide the front face and 
shrink it quite small to make the centre of the rim. 
Extrude this a few times if you like. 


1 Select the 12 faces on the front of the rim and 

use Subdivide, but this time set the mode 
from Groups to Separately. This creates individual 
indentations. Use Extrude to deepen these, then click 
the Destroy button to open them up. You can also 
remove the large rear cap in this way. 


1 Select the outer sides of the rim object and 

use Extrude set to Selected Face Vertex to 
widen the outer edge of the rim. Select the new row 
of faces created at the front of the rim and extrude 
them to create a lip. Here we have modified the tyre 
so it’s a little thinner and moved the rim into place. 
See the file Wheel.r3d on the DVD. 


UNIFORM SCALING 
Hold down the Shift key when using the scale 
handles to constrain to uniform scaling. 


PART 3 

EXTRA DETAIL 
Use Boolean rendering to add 
essential detail to your model 1 


ips aaa alka - 
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1 To create fancy drilled brake discs, we're using 

Booleans. Create an Analytic Cylinder (Unified 
tab, Circle>Analytic Cylinder) in Front view. Now 
make another small one, using the points at the ends 
of the handles to scale if necessary (disable Snapping, 
too). Also scale the larger one along the z-axis. With 
the small cylinder selected, choose the Rotator tool 
from the Creation toolbar tab, and click with snapping 
enabled in the centre of the large cylinder. 


i TREE, MIS WRK AIS TERETE + to Meee 
1 You should see three other cylinders appear in 

an array. Double-click the Rotator object in the 
Select Window to access its properties and set the 
Angle to about 8 degrees. Select the folder called 
Rotator and right-click choosing Drop To A Level. This 
groups the Rotator hierarchy into another folder, 
essentially a Null object. Now you can move and 
rotate this to get the arrangement seen here. 


TTT 


= a 


With this level selected, use the Rotator tool 
1 again to make another array. This time, enter 
an angle of 20 degrees and set the number of 
instances to 18. Because they're all instances, you 
can go in and scale the original cylinder and all the 
instances will update as well. Select the large cylinder 
and the top level of the rotator hierarchy and choose 
Drop To A Level to group them. 


=> 
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1 You should now have the following 
hierarchy: a folder under Root containing 
the large disc and the array folder. In the Properties 


panel, set this folder to Volume inverted in its Gen tab, 


then set folder above this (containing the array folder 
and the large disc) to Boolean Intersection (AND) in 
the Spec tab. Basically, we're intersecting the two 
objects/levels, but making one inverted so that it 
creates the holes. You'll only see the holes during 
rendering, so do a test to make sure. See the file 
Disc.r3d on the DVD. 


PART 4 SUSPENSION 
SPRINGS 


Next, we'll create the springs using 
Helical curves and the Rotate tool 1 


1 To create suspension springs, we're going to 
use the Helix curve tool. Go to Top view, 

enable grids and Snapping and turn off Perspective. 
Select the NURBS tab and choose the Helix tool, then 
set the type to Cylinder. Click in the centre of the view 
and once again a few units upwards. Now ‘dial’ in the 
number of turns by rotating the mouse —- we've used 
8. Click once more, still in Top view, for symmetry. 


20” Draw a straight, two- point curve e along the 
length of the Helix at its centre, then create a 
small NURBS circle for the cross-section. Select the 
curves in the order Axis, Circle, Helix, then click on the 
NURBS Rotate tool to create the coil. Move the Circle 
to the end of the curve, perpendicular to it to get a 
proper coil. Because the resolution is low in the 
OpenGL preview, render or use Wireframe. 
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SELECTIVE LOADING 

To avoid loading multiple materials, turn 

on Selected Sections Only in the Load dialog 
and only select Objects. 


APPLYING MATERIALS 
To apply materials to objects, select the object, 
go to the Material tab and drag and drop the 
desired swatch/name onto the object in the 3D 
view. Building VSL materials in Realsoft 4.5is a 
whole other tutorial in itself, but you can get 
started by looking at the presets and then 
customising them. 


2 To get rid of the over-extended ends of the 

Helix, open its properties and in the Spec tab 
change the End Condition to Phantom. Move the 
view to update it and you'll see the coil truncated at 
each end. Now it’s the right shape. See the file 
Coil.r3d on the DVD. 


2ART 5 BRINGING IT 
ALL TOGETHER 

Finally, we'll assemble and place 

our objects to create our buggy 1 


2 The rest of our buggy is built using various 

procedures similar to those outlined in this 
tutorial. You can continue to add detail to the model 
as you see fit, but note than the software has a 
limitation of 30,000 surfaces during rendering. The 
finished model has about 20,000, so there's loads of 
scope for your imagination. Assemble your files by 
loading them, unchecking the Replace box as you do 
so. Afterwards, move the objects into place. 


2 Drop the suspension spring group into the 

wheel group, or group them together in a 
new level. Move the suspension spring (we've 
added some extra parts using a NURBS rotate and 
acylinder) into position by the rear wheel, and then 
make an instance using Edit>Instance menu. Scale 
this slightly and move it to the front of the buggy. 
Group the rear and front wheels and instance this 
group. Use the Mirror tool to flip them to the other 
side of the buggy, as shown. 


FINAL STEP 


render an image or animation to disk, first add a 

camera. The best way to do this is to set the view 
as you want it, then click the Camera tool (Creation 
toolbar tab) and Accept. This places the camera at the 
current point of view. To link this camera to the view, 
right-click in the view and choose Camera>Tracking. 
In the Render tab of the Select window, drag a render 
preset into the view to make it active, then either 
render the view or choose the File>Render command 
to render to a file. Job done! 
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3ds max 5 


=> 


LANDSCAPES 
IN3DS MAX 5 


Create this canyon scene in 
3ds max 5 using Photoshop 
and a few stock textures 


With the numerous plug-ins out there, and additional 
external programs, it's not difficult to generate effective 
terrain. However, there are two downsides to using 
third-party apps: first, they cost money and second, they 
take a good while to render due to the high geometry 
count needed to create displaced rock effects. In this 
tutorial, we show you how to create a procedurally 
generated landscape incorporating a canyon, directly 
from within 3ds max’s own toolkit. We'll also handle 
geometry refinement with maps, so any additional 
geometry will only be in the places we want it to be in. 
This means we can increase the polygon count and 

not worry too much about the render times. 

The texturing is going to be handled partly within 
3ds max (for mixing maps and materials, and to handle 
the displacement and geometry refinement), and partly 
with Photoshop (texture painting and detail) to add 
some realism and weathering to the texture map. 

We'll also light the scene using a lighting rig to simulate 
Gl. Finally, we'll provide the scene with a sense of scale 
by adding environmental effects and a pre-rendered 
panoramic sky to finish off the image. 


INFO Artwork and tutorial by Pete Draper, www.xenomorphic.co.uk 


‘Look in the folder 
4 _maxland_p186 
© ) max on the cover 
Sa 


DVD for the files 
you need to follow and 
complete this tutorial. 
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THE GEOMETRY 
First we'll lay out our base mesh, then 


add the elements to control geometry 
refinement and displacement J 


So 


In the Top Viewport, create a Plane primitive and 
label it ‘Terrain’. Set the Length and Width settings 
to 20000, and the Length and Width Segs to 5. Add 

a UVW Mapping Modifier to the stack. 


Add a Volume Select Modifier, right-click it, 

then rename it ‘Refinement Selection 1’. Set the 
Stack Selection Level to Face and Surface Features 
to Texture Map. Add a Meshsmooth Modifier and 
set the number of alterations to 4. Turn this Modifier 
off for the time being by clicking on the lightbulb 
icon next to it. 


Add a Volume Select Modifier and rename it 

‘Refinement Selection 2’. Set the Stack Selection 
Level to Face and Surface Features to Texture Map. 
Add a Meshsmooth Modifier, set the number of 
Iterations to 1, enable the Render Values Iterations 
and set it to 3. Turn this Modifier off by clicking on 
the lightbulb icon. 
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DreamScape 2.0 ($595) is the leader of the pack, 
thanks to its terrain editing and voxel rendering 
{no more waiting for that lengthy render!). Its 


a panorama. For more info on this plug-in, see 


a eo 
Add a Mesh Select Modifier to clear the selection. 
Next, add a Displace Modifier and rename it 
‘Displacement Stagger’. Set the Strength to 2500, 
and turn on Luminance Center. Set Length to 80040 
(four times the original) and V Tile to 4. 


‘Displacement Step’. Set the Strength to 2500 
and turn on Luminance Center. Set Length to 80040 
and V Tile to 4. These Displace Modifiers don't tile 
outside of the gizmo, so we've had to increase their 
length, and therefore the tiling, equally. 


In the Material Editor, click on Get Material, 
create a new Gradient Ramp map and label it 

Displacement Stagger. Set the Blur offset to 0.01 

and Interpolation to Solid. Remove the middle flag 

and create flags at positions 40, 43 and 45 with 

RGB colours 100, 100, 100 37, 37, 37 and 0, 0,0 

respectively. Set the flag at position 0 to 128, 128, 128. 


Create flags at positions 57, 58 and 60 and set the 

colours to RGB 37, 37, 37 100, 100, 100 and 128, 
128, 128 respectively. Set the Noise Amount spinner 
to 0.4, check on Turbulence, set Size to 10 and Levels 
to 10. Select the Displacement Stagger Modifier and 
drag the Gradient Ramp map to the Image Map slot in 
the Modifier. Select Instance Clone when prompted. 


mn old 
Drag the map to another material slot and 
rename it ‘Displacement Step’. Remove all flags 
and set the Noise Size to 11. Create flags at positions 
28 and 72 (RGB 145,145, 145), 33 and 67 (RGB 123, 
123, 123), 38 and 63 (RGB 100, 100, 100), 39 and 59 
(RGB 37, 37, 37), 41 and 57 (RGB 18,18,18), 44 (RGB 0, 
0, 0), 61 (RGB 57, 57, 57) and 80 (RGB 128, 128, 128). 
Select the Displacement Step Modifier and drag this 
Gradient Ramp map to the Image Map slot in the 
Modifier. Select Instance Clone when prompted. 


Copy the Displacement Stagger map to a new 

slot and label it ‘Refinement Selection 1’. Set the 
V Offset to 0.5, Blur Offset to 0.001 and remove all 
flags in the gradient. Create flags at positions 12 
and 90 and set them to black and white respectively. 
Set flag 0 to black. Instance copy this map to the Map 
slot of the Refinement Selection 1 Modifier. Turn the 
first Meshsmooth back on, and in the Meshsmooth 
Modifier turn off Apply To Whole Mesh. 


5» Rebates er 
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1 Copy the Refinement Selection 1 map to a new 
slot and label it ‘Refinement Selection 2’. Move 
the flag at position 12 to position 10 and the flag at 
position 90 to 86. Create flags at positions 46 and 56 
and set their colours to black and white respectively. 


1 Click on the Gradient Ramp button and create a 

new Mask map. Keep old map when 
prompted. Drop a Gradient map into the Mask’s Mask 
slot, set all colours to white and turn off U and V 
Tiling. Go back up to the Mask map and Instance copy 
this Mask map to the Map slot of the Refinement 
Selection 2 Modifier. Turn this Meshsmooth’back on 
and turn off Apply To Whole Mesh as before. 


Add a new Volume Select Modifier to the top 
1 of the stack and rename it ‘Canyon Base Relax’. 
Set the Stack Selection Level to Vertex, turn on Soft 
Selection and set the Falloff to 500. Reposition the 
Volume Select’s Gizmo in the Front Viewport so the 
bottom-most vertices are selected (as illustrated). 


al. 


1 Add a Relax Modifier to the stack and set 

the Relax Value to 1 and Iterations to 10. Turn 
off Keep Boundary Points Fixed. Add a Volume 
Select Modifier to the stack and rename it ‘Canyon 
Internal Inverted’. Set the Stack Selection Level to 
Vertex, check on Invert, and in the Surface Features 
section, enable Texture Map. 


1 Copy the Refinement Selection 1 map to an 

slot and rename it ‘Canyon Internal Selection’. 
Turn off U Tiling and change the Interpolation to 
Ease In Out. Remove all flags and create black flags 
at positions 25 and 80, then create white flags at 
positions 77 and 70. Set flags at positions 0 and 100 
to black, then Instance clone this map to the Map slot 
of the Canyon Internal Inverted modifier. 


Add a Displace Modifier and label it ‘Canyon 
1 External Displacement’. Set the Strength to 
500. Create a new Smoke map and label it ‘Canyon 
External Displacement’. Change Source Mapping to 
Explicit Map Channel, Size to 0.3, Iterations to 20 and 
Exponent to 0.75. Instance clone this to the Map slot 
of the new Canyon External Displacement Modifier. 


16 Add a Mesh Select Modifier to the stack to c! 

the Sub-Object selection. Add a UVW Map 

Modifier and set the Map Channel to 2. Change the 

alignment to Y and click on Fit. Set the Width eb 
| 


setting to 120020 to stretch out the Modifier’s Gizm 


PART 2 THE 
TERRAIN MATERIAL 


Next we'll set up the material tree to 
handle the multiple materials and 
maps required to generate our terrai 


1 In the Material Editor, create a new Top/ 
Bottom material and label it ‘Terrain’. Set the 
co-ordinates to Local, Blend to 10 and Position to 90. 
In the Top slot, add a Blend material and label it ‘Top’. 
In the Blend’s Material 1 slot, add a Blend material 
and label it Canyon. Label the Canyon Material 1 
‘Canyon Main’ and set the diffuse colour to any 
green. Label the Canyon Blend Material 2 as Water. 
Set its Specular Level to 180 and Glossiness to 80. 


>INSIGHT 
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Move back up the material tree and label 
1 the Top Blend Material 2 material ‘Canyon 
External’. In the Diffuse slot, add a Mix map and label 
it ‘External Texture Mixer’. Add a Diffuse Map to Mix 
slot 1 and load in the sand_tilable_green.bmp texture. 
Set U and V tiling to 2. 


1 Copy this map into Mix slot 2 and set U and V 
9g tiling to 5. In the Output rollout, amend the 
RGB Offset to 0.2 and RGB Level to 1.3. In the Mix 
map’s Mix slot, add a Smoke map and call it ‘External 
Mix Control’. Set Source mapping to Explicit Map 
Channel, Size to 0.3, Iterations to 20, Exponent to 0.75. 


2 In the Canyon External material’s Bump slot, 

add a Mix map and label it External Bump 
Mixer. Instance copy the External Texture Mixer to 
Colour slot 1 of this new Mix map and set the Mix 
Amount to 30. Add a Cellular map to the Colour slot 
2 and label it ‘External Large Cracks’. 


UTTING DOWN 
ENDER TIMES 
You may feel that render times go through 
the roof when rendering out this scene! To 
bring these down, here are some solutions: 
turn off Bump Mapping for all or some of the 
materials, reduce the amount of Raytracer 


selected (thus less are refined), or remove one 
(or both) of the volumetrics in the scene. 
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LIGHTING 1 

This scene’s lighting can be set up as follows 
(check step 31 for light positioning reference 
and the final step for settings reference). Create 
a Target Direct light and position so the target is 
in the centre of the canyon. Turn on Shadows, 
set the Multiplier to 0.035 and set the Colour to 
RGB 191, 206, 221. Check on Overshoot, set the 
Falloff/Field to 12000 and turn off Specular. Set 
the Bias to 0.001, Size to 256 and Sample Range 
to 10. Instance copy this light to the opposite 
side of the first light’s target (equidistant to the 
opposing light). See Lighting 2 on page 191. 


2 Set Source mapping to Explicit Map Channel, 

Division Colour 2 to RGB 60, 60, 60, Cell type to 
Chips, turn on Fractal, set Size to 0.2 and Iterations to 
1.5. Add a Cellular map in the Cell Colour slot, call it 
‘External Small Cracks’, set Source mapping to 
Explicit Map Channel, Division Colour 1 to RGB 183, 
183, 183 and 2 to RGB 60, 60, 60, Size to 0.03, Chip Cell 
type, and Fractal enabled. Clone this Cellular map into 
the External Large Cracks Division colour 1 slot. 


2 2 In the Top Blend material, add an Output map 

to the Mask slot and label it ‘Internal Selection 
Inverter’. Instance copy the Canyon Internal Selection 
gradient ramp to this Output map’s Map slot, thus 
inverting the map and maintaining the original. At the 
top of the material tree, rename the Bottom material 
of the Top/Bottom material ‘Canyon Internal Side’. 


2 In this material's Diffuse slot, add a Bitmap 
map and load in the Sandstone01.tif file. 

Set the Map Channel to 2 and Blur Offset to 0.01. 

In this material's Bump slot, add a Mix map, label it 

Side Bump Mix, set the Mix Amount to 50 


2 4 Instance copy the Sandstone bitmap into Slot 
2, and add another Mix map to Slot 1. Label 
this ‘Step Mixer’, set the Mix Amount to 50 and 
Instance copy the ‘Displacement Step’ Gradient to 
Slot 1 and the ‘Displacement Stagger’ Gradient to 
Slot 2. Assign this entire Material tree setup to the 
Terrain plane. Centre the entire mesh in the Top 
Viewport and render off a large-size square image so 
we can use this as our template for painting textures. 
If it takes too long to calculate the mesh, reduce the 
second Meshsmooth’s Render Iteration setting. 


TEXTURE PAINTING 


Taking our template render into 
Photoshop, we'll use this as a guide as 
we create weathering, plant life, and a 
river down the centre of our canyon / 


2 Load the render into Photoshop and crop it to 
5 the plane’s boundaries. Add sand.bmp to the 
canvas and, using the green areas of the render as a 
guide, Dodge and Burn using large and small stippled 
brushes to create differences in sand texture and 
weathering effects around the edge of ledges. 
Duplicate this layer and set to Multiply blending. 
Create another layer and set to Linear Burn. Using 

the same method, paint different green areas onto 
the ledges and inside the canyon to simulate foliage. 


2 Using the Pen tool, draw line(s) down then 
centre of the canyon to create a river. Stroke 

this and shade it a dark brown. On a new layer, create 
an Overlay layer and add highlights to the river. 
Stroke the brown line with a thin white line on a new 
Soft Light layer, blurring it slightly to add a weathered 
effect. Add an additional Soft Light layer and edge up 
the canyon’s edges. Finally, add a Hue/Saturation 
adjustment layer and reduce the Saturation by 30. 


2 Offset filter all layers, and use the Snapshot 
and/or Healing Brush to ensure the entire 

image tiles vertically by removing any seams and 
ensuring the river's top and bottom edges line up. 
Reverse the offset and save a copy of the image. On 
the copy, fill the river layer white (while maintaining 
transparency) and drop in a solid black background 
behind it. Save this out as the reflection mask. 


PART 4 PUTTING IT 
ALL TOGETHER 


Going back into 3ds max, we'll create 
additional geometry and effects to 
simulate clouds and fogging © 


2 Create a Geosphere that encompasses the 

Plane with a radius of 40000, Hemisphere 
checked on, situated just beneath the plane, and label 
it ‘Sky’. Add a Normal Modifier and a UVW Map 
modifier and set to Cylindrical. Create a new material, 
label it ‘Sky’ and set Self Illumination to 100, Load the 
sky_panorama.bmp image into the Diffuse slot and 
assign the material to the Sky dome. Scale the object 
down by 30 per cent along the Z axis. 


In the Canyon Main material, load the saved 
29 Diffuse map you created into the Diffuse 
Slot and instance copy it into the Bump slot with the 
Bump spinner set to 10, In the Canyon Blend Mix 
material, drop the Reflection Mask map you created 
into the Mask slot, In the Water material, drop the 
saved Diffuse map into the Diffuse slot, the Reflection 
Mask map into the Bump slot (set to -100) anda 
Raytrace map into the Reflection slot (set to 30). 


3 Create a new Gradient Ramp Map and 

label it ‘Fogging Texture’. Set to Spherical 
Environment mapping, and set the W Angle spinner 
to 90. Change Interpolation to Custom, remove the 
middle flag and create flags at 26 (RGB 162, 168, 151), 
40 (RGB 80, 130, 170), 49 (RGB 221, 231, 241) and 55 
(RGB 80, 130, 170), with flag 0 set to RGB 213, 192, 140 
and flag 100 set to RGB 80, 130, 170. Copy this map 
and label it Fogging Opacity. Remove all flags and 
create new ones at 49 and 55, then set flags 0 and 49 
to RGB 101, 101, 101 and 55 and 100 to black. 


3 Create a camera 4 pol down and across athe 
canyon. Show Environment Ranges and set 

the far range to 60000. Add a Fog Atmospheric effect 

in the Environment settings and label it ‘Fog Layered’. 

Instance copy the Fogging Texture to the Fog’s Colour 

Map slot and the Fogging Opacity map to the Opacity 

Map slot. Check on Layered and set Top to -200, 

Bottom to -2500, Density to 50 and Falloff to Top. 

Add another Fog map, rename to ‘Fog Distance’ 

and assign the maps as before. Check on Exponential. 


FINAL STEP 


Be at the base of the Canyon plane's stack, 
increase both render multipliers to 4, Set up the 
lighting (see the Lighting 1 & 2 insights - above and 
on previous page) and render out the scene. In the 
Raytracer Global settings you may wish to reduce the 
depth to speed up rendering times, as only the sky 
and terrain are being reflected. The end result is very 
effective, but if you want to do more, go back into 
Photoshop and refine your texture, adding detail such 
as rock decals and extra shading on the water. 
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3DS MAX 


CEL-SHADY 
INDIVIDUAL 


Most cartoons now integrate 
some kind of CG work in 
their pipeline combining 3D 
media with 2D. We explore 
how easy it is to do and if it 
actually looks any good 


Recently, there’s been an increase in the amount 
of 3D media integrated with 2D media — mainly in 
the film industry, where it’s had a huge impact on 
traditional animation (just check out Disney’s 
Treasure Planetto see the latest techniques in 
action). Nowadays, however, it doesn’t have to be 
just film production that benefits. Design, print 
and commercial media are actively using the 
same methods within 3D software to streamline 
tasks normally undertaken by the 2D artist. 

Now included within 3ds max 5is a material 
that enables you to shade your objects to make 
them appear as if they were a two-dimensional 
image. Just by utilising its basic settings, this Ink 
‘n’ Paint material is incredibly effective, and, 
thanks to an array of features, you can also modify 
the results to suit any number of requirements. 

Here we model out a conceptual vehicle for a 
print advertisement, using this new material to 
get the best from its features. Should you wish to 
jump right to the materials and not bother with 
the model creation, a library of the materials 
created in this tutorial and small sample 
scene are included on the cover DVD. 


ON THE DVD 
In the folder 
© 4 maxcel_p197 
on the DVD 
you'll find two 


files: ca_cellshade.mat 

and ca_cellshade_teapots. 
max. Use these to complete 
the tutorial. Words and 
artwork by Pete Draper: 
pete.draper@xenomorphic.co. 
uk, www.xenomorphic.co.uk. 


PART 1 CREATING 
THE MODEL 


Using 3ds max 5's superlative 
polygon-modelling toolkit to 
sculpt the vehicle from scratch 1 


er aa 


Create a box primitive 150x200x300 with three 

length and width segments and five height 
segments. Right-click the object and collapse it to 
an editable poly. Amend the vertex positions to those 
illustrated and weld the top-corner vertices to those 
below them, to create a diagonal edge as illustrated. 
Now weld the vertices at the bottom left-hand side to 
create the geometry shown. 


Select the three bottom, inner polygons as 

illustrated and extrude down twice. Amend the 
vertex positions in the left viewport as before, then 
weld the vertices on the right-hand side of the new 
extrusion to form a point as shown. 


Select the large front polys and Inset them 

slightly. Next, extrude backwards to create the 
windscreen. Perform the same task at the rear, but 
extrude back more to create a space for an additional 
object. Extrude back the bottom polygons as shown 
to create additional indentations. 


Extrude out and amend the vertex positions at the 

bottom of the model to create a curved surface. At 
the rear, slice across the middle polygon underneath 
the new inset and at the rear of the curved surface. 
Target-weld the bottom inset to create a chiselled 
inset, select the rear three polys and extrude very 
slightly. Pull these new polys outwards. 


Select the new extrudes vertices and negative 
scale along the X-axis (using the Selection Centre 
tool) to line them up vertically. Extrude again and 
pull the top in to create a slight slant. Select the 
middle end polygons, then inset and extrude back 
as before. Remove any five-sided (or more) polygons 
by creating new edges and turning them into three — 
and four-sided polys. 


Inset, extrude and target-weld to create a small 

box sitting on the real extrusion of the model. 
On the top of the model, select the three middle-rear 
polys and extrude up and shape them as shown. 
Select the middle poly on the front slant and inset, 
extrude and target-weld to create the outset polys. 
Select the new front poly and inset and extrude 
back several times to create the indentations. 
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Down along one side of the model, select the 

corner edges around the model (top, front, side 
and rear) and chamfer them a fraction to generate 
the result shown above. Centre the object’s pivot, add 
asymmetry modifier, then set it so the chamfered 
side of the object is mirrored on the other side. 


Select the two large polygons on the side and 

inset them a little. Tessellate the inset polys a 
few times. Target-weld the excess vertices to just 
end up with horizontal polygon rows. Bevel out each 
polygon row individually to create the desired effect. 


As with the sides of the model, select the 

harsh edges around the top and side of the rear 
extrusion and chamfer them a little to smooth them 
out. Target-weld and create edges to clean up any 
five-sided (or more) geometry and to ensure there 
aren't any overlapping polys. 
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tet paint shed. 


using plasma's ve 
front within dele mae The raciet wes tier tehwmed to 
remove any non-essential information and brought 
into Photoshop, where it was simply colour-corrected 
and overlaid with text. 


1 Collapse the geometry down to an editable 

poly. Bring in the sides of the curved surface at 
the bottom of the mesh. Select the windscreen and 
outer polys as shown and slice them. Target-weld 
the floating vertex next to the new slats to the base 
of the top slat. Select the inner polygons created by 
the slice and extrude back a little, as shown. 


11 Select any harsh right-angled edges created by 
the last extrusion operation and chamfer them 
slightly. Select the rear corner polygons and inset, 
extrude back, inset again, extrude out, and chamfer 
the edges of the outward extrusion. Inset and extrude 
the rear-facing outwards extrusion, as shown. 


Select the top line of polygons running the 
1 length of the model, inset and pull the inset 
polys up. Inset slightly and extrude back down. 
Target-weld the corner vertices to fan out the inset at 
the front and rear of the roof to form a channel. 


1 Select the large polys underneath the extruded 
slats on the side of the model, inset slightly and 

extrude inwards. Target-weld the inner front and rear 

vertices to the outer front and rear vertices to create 

an intake, as shown. Select the top side chamfer, 

inset and extrude back, again as shown. 


1 Finish off the upper part of the model by target- 

welding the roof extrusion to the front of the 
roof to create an incline. Also, chamfer any harsh 
edges around the top of the headlight housing. 


1 On the bottom end of the rear extrusion, 
extrude down and across to create a mudflap. 
Underneath the extrusion, extrude out about seven 
times, reposition vertices and weld to form an arm to 
hold the rear wheel. Insert vertices in the middle of 
edges in Edge Sub-object mode, and create 
additional edges using these vertices to extrude the 
resulting polygons out to create a fin at the rear. 


1 Create a box 240x240x110 with three length, 

one width and four height segments, then 
position as shown. Collapse to an editable poly. 
Adjust the vertices in the left viewport to represent 
those in the screenshot. 


Chamfer the right-angled edges of the mesh 
1 and re-form the vertices so the mesh’s sides 
bulge out, as in the screenshot's front viewport. Select 
the front and back polys of the mesh, inset and 
extrude back. Select the large polygons on the side 
and top, inset, extrude back, inset again, extrude 
outwards and outline a little to taper the extrusion. 


1 Create a cylinder with 30 radius, 30 height, 
three height segments and 18 sides. Collapse 
to an editable poly and position, as shown. Extrude 
the middle polygons back to form an axle. Inset the 
cap ends to form a rim and extrude back. Extrude 
outwards again and outline, repeating to form a 
slight curve. Finally extrude back, inset, then extrude 
outwards again to create an indentation in the centre. 


1 The front and rear suspension and the rear 

ventilation geometry were created from a 
single box with several length iterations. After 
collapsing to an editable poly, each row of iterations 
was bevelled independently. The geometry was then 
repositioned, scaled, tapered and sliced (for the 
ventilation) and amended to fit its place. 


Create a cylinder, radius 50, height 23, with 
20 four height and cap segments and 18 sides. 
Clone this cylinder and hide it. Scale the outer ring of 
vertices inwards to curve the outer surface. On both 
sides, create the outline of the inside of the wheel 
using new edges, extrude back, delete the unwanted 
polygons and weld the two inner sides together. 
Chamfer edges to remove harsh right-angles. 


2 Unhide the cylinder and use the primitive’s 
slice feature to remove the bottom part as 
shown. Increase its radius and height a little so it 
fits snugly over the wheel. Inset and extrude the 
underside of the wheel arch for the wheel to 
disappear into. Also, extrude the front few polygons, 
inset them and extrude to form a headlight, then add 
any detail you fancy to the sides of the wheel arch. 


2 If you like, finish off by refining the geometry 

still further. We've created a slight wheel arch 
for the large front wheel's axle (a modified cylinder) 
to enter, and created headlights between the wheels 
and underneath the windscreen, using inset and 
extrusion techniques, as before. 


PART 2 SETTING 
UP MATERIALS 


Create one main material, then 
duplicate it several times, renaming 
and amending colour settings before 
assigning them to the model J 


er ee 

2 Create a new Ink ‘n’ Paint material and label 
it Paint Light. In the material's Basic Material 

Extensions rollout, check off two-Sided (as none 

of our objects have holes or backfacing polygons). 

Set the Paint Levels to four, the Shaded spinner to 


50 and check Highlight. 
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are 
2 Set the Lighted colour swatch to 
4 220. Drag this swatch to the Highlight swatch 
and copy it. Amend its saturation so it’s nearly white. 
In the Ink controls rollout, set the Ink Quality to two 
and set the Outline, Overlap and Mat ID swatches to 
white. Check off SmGroup. Assign this material to 
the wheel arch, main body and solar cell geometry. 


25 Copy this material and label it Headlights. Set 
the Paint Levels to two, Lighted swatch to RGB 
254, 232, 133, Shaded spinner to 80 and Highlight to 
white. Check on SmGroup and set the swatch to 
white. Clone this material twice, labelling the results 
Rear Lights and Glass, and set their Lighted swatches 
to RGB 177, 0,0 and 210, 210, 255 respectively. 


2 Copy the Paint Light material and label it 

Suspension. Amend the Lighted swatch to 
RGB 238, 198, 0 and the Highlight swatch to RGB 
247, 226, 131. Set the Shaded spinner to 70 and 
Glossiness to 20 to create a wider highlight to 
indicate a matte finish. 


Collection 2003 


RGB 190, 220, 


27 Copy the Suspension material and label it 
Ventilation. Set the Lighted swatch to a mid- 
grey and its Highlight to white. Set the Glossiness to 
50 to indicate a shiny surface. Now you've got the 
knack of how the basics of this material set-up works. 


e 
2 and set up the following materials: Tyre 
Rubber, Rubber (same, but darker), Tyre Metal 
(gold metal), Tyre Chrome (same but grey colour), 
Mech Metal (less shiny and slightly darker grey), 
Paint Dark (as Paint Light but, er, darker!), Solar Cells 
(shiny blue) and Gold. 


2 If you don’t want to set up all the materials, 

load in the ca_cellshade.mat 3ds max material 
library provided on the cover DVD. By selecting 
polygons on our model, we can assign materials to 
these polygons. As we've already assigned the main 
material to the mesh, all we now need to do is add 
the detail materials. 


3 Select the relevant polygons (but not using 

move or rotate, just in case you translate the 
polygons by accident) and assign the materials to 
those, as shown above. The most convenient way to 
assign materials around indentations (such as the 
headlights) is to select the appropriate polygons, 
expand the selection, assign the outer material, 
contact back and then assign the other material. 
Easier than selecting every polygon! 


3 We can now refine the geometry by adding a 
Meshsmooth modifier to the wheel and wheel 
arches and set its Surface Parameters to Separate by 
Materials. This ensures the materials boundaries 
remain intact once the geometry is refined. Instance- 
clone and mirror the front wheel set-up to the other 
side of the vehicle. The same smoothing set-up 
should also be assigned to the single rear wheel. 


FINAL STEP 


inish off the scene by placing the vehicle in situ. 

The illustration to accompany this tutorial was 
rendered out in 3ds max, with one target light to 
generate shadows and a gradient map set to the 
environment slot to create the sky. The ground isa 
single plane, deformed by polygon extrusions to 
create an interesting and irregular surface. [_] 
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3DS MAX 


Discover how to simulate the dramatic 


disintegration of an entire planet using a 
Geosphere, a Boolean Compound Object 


and an animating operand 


e 
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SHORTCUTS 


The way we're going to handle this task 
is by subtracting the geometry from the 
main Earth planet — using a Geosphere, 
a Boolean Compound Object and an 
animated operand. In this way, the 
object we're using to subtract the 
geometry from the Earth model is 
being transformed to create an 
animated subtraction. 

The subtraction is another clone of 


OpAnzomp>s 
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7) 


ZZ 


IT’S THE END OF THE WORLD 


segments and a Radius of 100. Clone this and label it 
Glow. Set the Glow sphere’s radius to 98. Assign a self- 
illuminated material with a material ID of 1 to the Glow 
and assign an Earth material to the Earth sphere, setting 
up any additional mapping to it if required. 


the Earth model that’s scaled down, 


Sua 
Coane: Stee 


Copy the Earth sphere again and label it Subtraction. 
Scale it down to 30 per cent and offset it to the lefthand 
side of the Earth sphere. Animate the scale up to 120 per 
cent over 500 frames. Add a Noise modifier to the stack 
and use the settings illustrated. Create a new material 
with an ID of 1 and assign it to the Subtraction sphere. 


Eres 


Select the Earth sphere and create a new Boolean 
Compound Object. Ensure subtraction A-B is selected 
and then select the Subtraction sphere as Operand B. 
Select Match Material IDs to Material if prompted. Create 
an Omni light and position inside the cavern within the 
Earth sphere created by the Boolean. Use the settings 
for this, and its volumetric light, as illustrated. 


Finally, we need to add sufficient glow. Create a 

Lens Effect and add a Glow element to the right-hand 
Parameters column. In the Options tab, check on Image 
Sources - Effects ID (already set to 1). Set the Size to 0.05 
and the Use Source Colour to 100. If required, add another 
glow element with a lower intensity and higher Size to 
create a diffuse radiance around the glowing areas. 


with a noise modifier added to distort 
the mesh (to create the irregular 
shaped cracks in the surface), and 
repositioned to one side of the Earth. 
This ensures that one side of the planet 
begins to disintegrate first, spreading 
across to the other side as the 
subtraction sphere is scaled up. 

If the sphere is animated scaling 
from a low (about 30 per cent of the 
original) to a high (around 120 per cent) 
over a series of frames, the resulting 
subtraction will give the impression 
that the surface is dissolving away. 

To reveal a glowing mass, we need 
to create another clone of the Earth’s 
sphere, this time with a smaller radius. 
To create the glow, we assign a material 
ID to anew material that we've set up 
to self-illuminate a light yellow colour, 
and assign it to the new sphere. The 
glow itself is a render effect, set so that 
it only affects the ID assigned to the 
glow material. If another material is 
assigned to the subtraction sphere 
before the Boolean, then it too can have 
a glow performed on it, which will 
create different coloured glows as the 
surface dissolves. To top it all off, we'll 
add a volumetric Omni light to shine 
through the gaps in the surface. 

Finally, one thing to note. Before any 
Boolean object is created, ensure that 
your animation and materials are set 
up in advance - otherwise, assigning 
materials to the Boolean result may 
not work as expected. Work with low 
polygon objects at first, especially the 
subtraction object; you can always 
increase the detail later on. 

And before you render, perform 
a preview to make sure the Boolean is 
performing correctly on every frame. 
Animated Booleans can fail, which 
results in flickering on the geometry. 

If this occurs, amend the geometry 
count of the subtraction sphere or 
the intensity of its noise modifier. 

Now follow the walkthrough on the 
left and take a look at the files on your 
DVD in the folder 4_minimax2_197. 
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camcorders and is now using them to make — 


PREMIERE PRO 208 feature films. Why not join them? 


Create the titles for a fashion pro: 
using Adobe’s leading video edi 


Ageneration has grown up with DV 
| 


THE FORMATS 
From Mini DV to HD 24p 


Mini DV 

The cheapest form of 

consumer DV. The best 

cameras are the Sony VX- 

2000 and the Canon XL1. 

| Used by news broadcast 
companies, these are 
broadcast standard, and 
with careful use produce 
good-quality films. 


DV, DV CAM and DVC-PRO 
Essentially the same as 
Mini-DV, with minute 
improvements in quality 
that make it the choice of 
pros. The cameras cost 
about ten times as much... 


Beta SP and DigiBeta 
Common in TV, and used by 
| some film-makers for high- 
| quality TV pictures that can 


look good when processed 


for film projection. 


HD 24p 

As used on the CineAlta 
cameras, this extremely 
high-quality footage is 


H Y recorded at 24 progressive 
A generation that’s Aaa ced dng 
grown up using DV unlike interlaced video, 
camcorders and Se 
ge. The motion and 
desktop editing is picture quality is close to 
. that of film, and it’s easily 
now startin g to converted to 35mm for 


theatrical projection. 


make feature films in 


exactly the same way | 


“ ome of my friends think 
film is dead,” said Anders 
Nilsson at the Cannes Film 
Festival last year. He may 
well have thought the same himself, 
having just shot a feature on the 
Sony CineAlta Hi-Def video camera, 
but he hardly dared say so to the 


Final Cut Pro boasts all the tools you need to create effects and apply advanced colour correction. 


E_Sommotion File edi 


Composite Layer Effects Windows Help a wo 
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Blockbuster movies such as Gladiator made full use of post-production solution Commotion 
Pro; it has a Photoshop-like interface that makes special effects easy for beginners. 


audience. Film purists are meeting the 
desktop movie revolution with 
hostility, and although Sony was 
screening CineAlta footage in an 
attempt to convert the wary, only a 
handful of people turned up. Of those, 
only acouple were directors or 
cinematographers. This doesn’t mean 
that HD (Hi-Def video) is irrelevant. 
While the purists try to pretend it isn’t 
happening, video is taking over the 
film industry, and feature films are 
being completed on home computers. 

Go to any short film festival and 
you'll find most of the movies are 
being made on DV. In many cases 
people buy a camera, make a few low- 
budget shorts and, within a few years, 
they’‘re winning film festivals. The long 
haul through film school is now seen 
as a time-waster for the untalented. 
The real geniuses just get out there 
and make films, albeit on video. 

Not too many years ago, film 
festivals wouldn't even accept films ~~ 


BURNBABYBURN 


We speak to digital film-maker, Paynie 


Desktop Revolution!) 7 © 


Paynie (AKA Stephen 


Payne) started work as 
a photographer for 
SOUNDS in London. 
“Bands asked me to 
shoot videos for them,” 
he says, referring to the 
days before Final Cut 
Pro. When FCP came 
along, it enabled him 
to swiftly edit his film 


BURNBABYBURN, 
about Burning Man (a 
huge event in the 
Nevada desert). “The 
edit took one week. | 
couldn't have done it 
any other way.’ 

Despite this, he 
warns that Final Cut Pro 
isn’t all that’s required to 
make a good film. “Over 
90 per cent of the stuff | 
see is crap. Anyone can 
buy dancing shoes, but 
it does not make them 
a dancer.” 

Although he thinks 
you can teach yourself 
to edit, he advises 
against it. “You'll waste 


a lot of time doing 
things the wrong 
way,” he says. “Start 
anywhere. Learn as 
many ropes as possible. 
Today I'm working 
onan Avid, doing 
some work on The 
Extraordinary League 
of Gentlemen, but ina 
few days I’m working 
with Herbalife running 
the sound desk.” 

Being involved at all 
these levels, he says, 
means life is never dull. 
“Sometimes a person 
tells you it can’t be done. 
It’s fun to show them 
how it can be done.” 


Creative Collection 2003 | 201 


6 M2 Digital video 


CA INTERVIEW 


We spoke to Tony Milch — an experienced editor who has worked on films such as Star Trek: First Contact and The Fugitive - about 
his take on the desktop film-making revolution. Fortunately for him, the transition to digital has been a very positive one 


home, and find their way to 
Hollywood in record time - 
but that’s not the way it was for him... “I wasn’t really 
looking for a career in motion pictures. | was wiping 
cels at Hanna Barbera when the production manager 
said they had an opening in their editorial department 
for an apprentice. Was | interested? | asked if the 
apprenticeship paid more money than the cel- 
wipership. He said that it did. | said | was interested.” 


Avid vs FCP 
When asked what made him switch to Final Cut Pro, 
Tony’s answer was simple. “Price.” Although Avidis 
the industry leader in Hollywood, Final Cut Prois so 
cheap (with Final Cut Express cheaper still), that you 
can edit for less than the price of a second-hand car. 
“For the first 30 years | worked with long thin strips 
of celluloid that had little holes along its edges, and 
destructive editing meant just that. If you or the 


With five Oscar Nominations director changed your minds about a cut or a shot 

and an Emmy to his credit, too often, the doing and undoing of the splicing tape, 
Tony Milch now uses Final Cut combined with too many short, four-frame pieces of a 
Pro and edits on his desktop. restored shot, meant the result would not go through a 
He acknowledges that these projector. You had to order a reprint off the original 
days people can teach negative of the shot to continue editing or screen the 
themselves the craft at picture. Labs aren't real thrilled to have to put original 


negative through a printer.” 

Working with Hi-Def video means this is no longer a 
problem. There’s no loss of quality and no restriction 
on how often the edit point can be changed. 

“The film situation before Non-Linear Editing was 
not unlike the document situation before word 
processors. People typed on typewriters. The 
documents worked. The difference, is that now you 
can do so much more. You can try six different edits of 
a reel, let alone a scene, and store the Edit Decision 
Lists and compare. In film, you used to have to make a 
film duplicate if you wanted to save a version, and that 
necessitated a 12 to 24-hour lab process. Today, dailies 
can be sent via FTP or dedicated lines or satellite to 
anywhere on the planet in matter of minutes.” 


Transitional phase 
“The process of film-making is faster with computers,” 
says Milch. In post-production, a picture like The 


Fugitive, which was the last picture | did on film, 
required 40 sound editors and five sound assistants for 
six weeks. At a point, there were 100 people. A 
comparable picture such as The Sum Of All Fears, 
which was done digitally, required three sound editors 
and one sound assistant for five weeks. With the 
advent of digital picture, the physical winding or 
rewinding of film or tape is a memory. You can now 
jump from the head of a reel to the end instantly. It 
used to take two minutes or so to manually wind 
through a 2000’ reel.” 

He acknowledges that he’s one of the few to have 
made the transition to digital without trauma. “The 
transition from film to digital was a biggie. There were 
many talented people who fell by the wayside because 
they couldn’t make the transition. It would be like 
learning to drive a car, driving it for 20 years or so, and 
then being told that to keep your job you have to sit in 
the cockpit of a 747 and make it work.” 

Despite this, Milch believes that would-be editors 
and directors with no prior experience can teach 
themselves. He suggests that you simply practice your 
craft, whatever your experience and no matter how 
low the budget. “There's no teacher as good as 
experience. You learn so much making your own film. 
There's no-one else to blame. It's wonderful training.” 


—————— 


shot on DV. In 2000, Dancer In The 
Dark won the Cannes Palm d’Or, 

even though it was shot on consumer 
camcorders. The controversy only 
lasted about a week, and people 


features, Full Frontal, on Final Cut Pro, 
having shot most of it with a Canon DV 
camcorder. Before too long, editing a 
movie on your desktop will appeal to 
more and more directors, especially 


began to accept that the digital those on a budget. 
revolution was underway. IN 2000, DANCER IN 
THE DARK WON THE 

TRIAL AND ERROR CANNES PALM D'OR, oe 

EVEN THOUGH ITWAS Home movie-makers are also getting 
It’s true that home DV doesn’t come SHOT ON CONS UMER their hands on software such as 
close to the quality of film, especially Commotion, combustion and After 
when printed to 35mm film for CAMCORDERS Effects. \t's the same software that’s 


theatrical release. No matter how well 
you light it, DV can’t match the beauty 
of celluloid, but then the ease with 
which you can make a low-budget flick 
remains a huge advantage. 

Learning to direct and edit isn’t easy, 
and it's a process made all the more 
difficult when you're using film that 
costs hundreds of pounds for a few 
minutes of footage. The best way to 
learn is by making mistakes over and 
over again. By shooting on DV, film- 
makers can produce films for the price 
of a big night out, practising and 
refining their art more quickly than is 
possible with film. 

Final Cut Pro, Apple's low-cost 
Non-Linear Editing software has been 
instrumental in this change, because 
it enabled home users to edit 
professionally. Many hobbyists now 
work in the industry, having taught 
themselves how to use the software 
— but it’s also popular with pros. 

Steven Soderbergh, the director of 
Traffic, edited one of his most recent 
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used in the film industry, and by 
applying this to their own films they 
are gaining an understanding of the 
film-making process that directors of a 
previous generation never could. The 


Final Cut Express is Apple's latest attempt to corner th 


je rapidly growing DV market. A Non-Linear 


Editing package good enough for many professionals, it’s a DV-only version of Final Cut Pro. 


DV revolution isn’t about saving 
money and making films in your 
bedroom, so much as experiencing 
the entire film-making process in 
depth, and frequently enough to 
become an expert. 

It’s this new generation of DV film- 
makers that longs for a future in which 
all films are shot on HD video, rather 
than film. George Lucas and his 
Producer Rick McCallum have been at 
the forefront of the revolution, trying to 
popularise the notion that film is a 
cumbersome technology, almost a 
century out of date. 

At Cannes, Lucas’ HD showpiece, 
Attack Of The Clones, didn’t do much 
to help the video cause. Shot with the 
very first CineAlta camera (which 
shoots video at 24 frames per second, 
just like film), it contained too many 
effects for the audience to truly rate the 
image. With masses of over-rushed 
CGI work, it looked like a messy 
cartoon. The buzz going around 
Cannes was that you can make a comic 
strip film on CineAlta, but real movies 
will always be made on film. 

Attack Of The Clones was digitally 
projected at Cannes, which is how 
Lucas always intended the film to be 
seen. On a screen that was truly 
massive, the image was flawless. 
There were no clicks, no juddering as 
the reels changed, and no scratches on 
the film or glitches in the sound. Better 
still, it was in focus, which is becoming 
more and more rare in cinema multi- 
plexes. Lucas has pointed out that 
most 35mm release prints are of such 
low quality that people get a better 
movie going experience when they 
watch a DVD. Digital projection, as well 


A NEW GENERATION 
OF FILM-MAKERS LONGS 
FOR AFUTURE IN 
WHICH ALL FILMS ARE 
SHOT ON HD VIDEO 
RATHER THAN FILM 


Benno 
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Adobe After Effects is a must-buy for professional DV film-makers. The core application offers a 
range of tools for motion graphics and effects, and is supported by a vibrant plug-in market. 


as curbing piracy, is a near-perfect 
way of projecting an image, and the 
new HD films will look best if they 
never touch film. 

More ‘ordinary’ films have been 
shot on CineAlta in the past 12 months, 
without the audience ever noticing. 
Rules of Attraction and Spy Kids 2are 
two (relatively) mainstream films shot 
on HD video and distributed on film, 
without any complaints from the 
audience. Cinematographers and 
directors can usually see a difference, 
but that difference will soon be gone. 
The technology is getting better 
at such a rate that it won't be long 
before most movies could be made 
without film. And when studios and 
production companies realise the 
massive cost savings, the days of 
film will be truly numbered. 


THE SOFTWARE 


If you want to get into film-making, this is the software you should try to get your hands on 


| 

| 

| Apple Final Cut Express 

| A low-cost choice for low-budget 
film-makers who need professional 


style editing, but without the bells and 


| whistles of Final Cut Pro. 
www.apple.com/uk 


Apple Final Cut Pro 

The ultimate desktop editing suite. 
Thanks to its remarkably low price, 
advanced colour correction and 
ease of use, this is often used by 
hardened professionals (director 


Steven Soderbergh is an advocate). 


| www.apple.com/uk 


Apple Cinema Tools 

| A Final Cut Pro expansion kit that 
enables you to edit film and HD, 
providing the sets of numbers 
required by the labs. 
www.apple.com/uk 


Avid Free DV 

Brand new and completely free. This 
entry level DV app is a good taster of 
more to come. 

www.avid.com 


Adobe Premiere 


Similar to Final Cut Pro and popular with 


ad-makers, but not all that widely used 
by professional film-makers. 
www.adobe.co.uk 


Adobe After Effects 

The workhorse of every special effects 
studio, this compositing app is a must 
for most production houses, and the 
next thing to buy after your Non-Linear 
Editing suite. 

www.adobe.co.uk 


Discreet combustion 
Discreet’s special effects compositing 


package is an alternative to After Effects, 
with some more advanced features — 
and a recently reduced price tag. 
www.discreet.com 


Pinnacle Commotion 

Great for retouching footage, removing 
blemishes or wire (from special effects). 
Definitely for more advanced users, but 
still popular with amateurs. 
www.pinnaclesys.com 


Pinnacle Edition 

Relatively new NLE — used to be FAST 
Purple. Powerful editing environment 
with high-end features at a decent price. 
www. pinnaclesys.com 


Film Gimp 

Free retouching tool with great colour 
depth. Used widely in the industry. 
filmgimp.sourceforge.net 


Creative Collection 2003 | 203 


ILLUSTRATION BY ROB CHIU 
fo@theronin.co.uk P] 


AFTER EFFECTS 6 


The latest version of After Effects introduces a suite of brand 
new features. We show you a selection of them in action 

as we produce two projects — a title sequence for a new fashion 
programme, in which we test drive some of the new text tools 
and an effect for a satirical comedy in which a talking baboon 
delivers a news conference. This requires a range of tools, 
including the new Motion Tracker, the Liquify tool (previously 
only available in Photoshop) and video painting. You'll also 
find the demo of AE6 on your DVD. 


INFO Tutorial by Christian Darkin, christian@darkin.demon.co.uk 
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STRIKE A POSE 


Check out the new Photoshop-esque 
text tools in AE6, as we create a 
fashion programme title sequence 1 


100M HCE 9:00-0-00 om) Tore : aan 
We begin our title sequence by dropping an 
appropriate backdrop into a new composition. 
(We used a readily available piece of abstract stock 
footage.) All we've done to the image is faded the 
backdrop down so that it produces an interesting 
texture on which to begin our animation. 


“ane Me eee Urea e 
The text tools in After Effects 6 have been totally 
rewritten and now closely resemble those in 

Photoshop. All we need to do is select the Text tool 

and start typing — a text layer will be created instantly. 


ere 


We can adjust the size, font, colour, and kerning 

of the text with the character box that pops up 
automatically. In this case, we want text to be larger 
than the screen so that we can animate it slowly 
through the frame over the course of the sequence. 


} 
| 
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We now drop in another piece of footage, and set 
the text as its alpha matte. This effectively makes 

the moving text into a stencil — with the new footage 
cut into the backdrop footage in the shape of each 
letter. For effect, we also add another text layer as an 
outline, and a Radial Blur. 


T HE LO 


We now start a new composition and create 
5 another text layer. With this, we're going to 
produce a little animation — which would in the 
past have necessitated having dozens of keyframes 
-and a layer for each individual letter. 
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On the timeline, we select the Animate menu and 

use the Character Value option. This gives us a 
new animation range. Animation ranges are a new 
feature, which enable you to apply adjustments to 
just a selected group of letters within a text layer. You 
can animate the size of the range and its position. 


a, oe 
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Here we've animated a range of just one letter, 

through the text from beginning to end, altering 
the vertical height and the opacity of the letter. Using 
just a couple of keyframes, we have an effect where 
each letter fades into view and shrinks into place. 


Using a similar technique, we created another 

composition in which the letters are written onto 
the screen, with each letter glowing momentarily as it 
appears. This was a tough effect to pull off in previous 
versions of After Effects. 


This effect requires us to have two copies of the 

text layer. The bottom one writes the text onto the 
screen; the top one has a glow applied to it, and an 
animation range ensures that only the leading letter 
throughout the animation is displayed with the glow. 
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We now composite our new layers over the 
1 original backdrop. We've placed several small 
copies of the ‘glowing letters’ composition all around 
the screen, and offset them in time slightly so one 
begins just as the other ends. 


After Effects =3@ @ 
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1 We then add the ‘letter-stretching’ composition 
at the end, positioning it along the bottom of 
the screen so that it gives the programme's title as an 

end point to the sequence. 


1 Here we've added more video images, using 

unusual Overlay modes and altering their 
Opacity over time to give the effect of camera flashes. 
This simply gives the shot more action and adds to its 
excitement. See the Premiere tutorial on page 208, 
where we've done additional work to the sequence so 
it's current for every new episode in the series. 
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PART 2 
MONKEYING ABOUT 


Our second project is a visual effect. 
Here we want to place human lips 
ona baboon, and animate its facial 
expressions as it reads the news 1 


Dush2 avi +. used | tne 
720x576, BNE ‘Separating (Lower) 
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The composite scene is made up of five 
1 layers: the backdrop, the stock footage of 
the baboon, the audio of the voice, the video of 
the mouth speaking the words, and finally the 
microphones. The only one we need to shoot is 
the lips. This is just a simple, locked-off close-up, 
in which the actor is told not to move his head at 


all. All of these layers are loaded into AE. 


We drag the monkey footage into a new 
1 composition and place the audio and video on 
top of it. The monkey is a couple of seconds shorter 
than the rest of the footage, so we use Time Stretch 
to slow it down alittle. 


1 it’ 's easy enough to scale down the lips and 

position them over the baboon’s mouth in the 
opening frame. However, to blend them in we need 
to draw a simple circular mask and feather it to soften 
the edges. We also have to check the 3D box, as we 
want to be able to angle the lips in 3D as the creature 
turns its head. 
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POSITION KEYFRAMES 

if you turn off the background layer (in this case, 
the monkey) and drag the first composition into 
a new composition timeline, you can try out 
adding position keyframes to keep the mouth 
in place, without destroying the track you've 
already built. 


16” Now for the fun bit: motion tracking. Version 6 
(Professional version) includes a brand new, 
completely rewritten Tracker which produces faster, 
more accurate results than before. We're just going to 
track for position (animating the rotation of the mouth 
in 3D will be done by hand). We select a point on the 
creature's snout, and hit Track. 


1 Our ‘Gomes iden t lend itself particularly 

well to tracking, so there’s a little work to do in 
cleaning up the track. If we want to, we can refine it by 
noting when the tracking goes wrong, and switching 
to another track point at this moment. 


KEYING TOOLS 

After Effects 6 contains completely new Keying 
tools, so it’s worth taking a look to see if you 
can make a decent key, even if you wouldn't 
have been able to do it in version 5. 
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In this case, that doesn’t work very rwellé so we 
1 simply readjust by hand, correcting the poor 
frames. This is a time-consuming task, and it tends to 
produce an imperfect result. To help the situation, we 
used ‘Smoother’ to reduce the number of keyframes 
a little before we began. 


1 We now turn on hinieson for the rotation 

of the mouth and go through the footage, 
giving the creature’s mouth the correct perspective 
each time it turns its head. We also added a little 
transparency, and altered the levels on the mouth clip 
to blend it more realistically with the creature's fur. 
AE's Tracker does have a Perspective tool that can 
do this automatically on decently marked footage. 
However, in this case, the animal's snout is poorly 
defined and provides no decent track points. 


2 ‘With the track connate the mouth looks 
almost as though it's a part of the animal. 

It’s a rather disturbing effect, but then that’s what 

we're after! Our next job is to give the baboon some 

human expressions. 


2 To achieve this, we use another new tool. If 

you've seen Photoshop 7, you'll be familiar 
with it: it's the Liquify tool. We can add Liquify in the 
same way that we'd add any other effect. 


2 There are a number of options for animation — 

along with the ability to warp the screen 
image in the same way as you would in Photoshop. 
You can animate the degree of warping, which is 
useful for effects that grow and fade, and you can also 
animate the Liquify mesh itself. 


2 Turning on Animation creates a keyframe at 
the start of the clip. We select this and use 
Ctrl+C to copy it. This is because we want our facial 
expressions to appear only briefly before the face 
returns to its normal state. Pasting in the unaltered 
keyframe will bring the face back to normal. 


2 We move a few seconds into the clip and paste 
the keyframe. This is the point at which we 
want the face to start moving. Moving on about half a 
second from there, we’re ready to begin warping. We 
use a relatively small brush size and stroke over the 
eyebrows with it, pushing them gently upwards. 


sts Tan . 
2 When we're happy with the look, we move on 

another half second and paste another copy 
of the unchanged mesh. The eyebrows move back 
down. Playing back this little animation, the baboon 
raises and lowers its eyebrows as if in surprise. 
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2 Now it’s simply a matter of scrolling through 

the animation to add a few more expressions. 
We can't just copy and paste the raised eyebrow keys 
to make the creature repeat the expression because 
it’s constantly moving its head. However, each 
expression only necessitates that we create a new 
warped image in between two copies of the 
unchanged keyframe. 
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2 Playing back the animation, we can decide 
whether we're happy with the speed and 
strength of the movements. If we want to change the 
way the expressions move, we can simply drag the 
keyframes. If we want to alter the look, we've no 
choice but to remove the keyframe and start again. 


After Effects 7 & 


2 Our final job is to place in a couple more 

layers. The first is easy enough - some 
microphones are placed in front of the primate. 
They're a still image, and they've been produced with 
an alpha channel in Photoshop so there's no problem 
compositing them. 


2 The backdrop is more tricky because it needs 

to be placed around the animal and there’s not 
enough colour difference in the original backdrop to 
do a traditional key. 


FINAL STEP 


e end by using another new feature, the Clone 

brush, to literally paint in our backdrop around 
the animal. There are several modes for this kind of 
cloning. We choose one that enables us to animate, 
making the shape of the painted area change as the 
silhouette of the creature alters. 
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PREMIERE PRO 


Premiere Pro is a substantial update to Adobe's leading 
video-editor. It looks new for a start, and although all the tools 
are still there with some new ones, they've been rebuilt from 
the ground up. In our After Effects 6tutorial on page 204 we 
began creating the titles for a fashion programme - now we 
explore Premiere’s new toolset and take this intro further. We 
need a title sequence that can be updated every week, plus a 
video montage. We'll also write the whole project to DVD using 
Adobe's new tool, Encore DVD. Demos of Premiere, Encore 
DVD and another new Adobe tool, Audition, are on the DVD. 


INFO Tutorial by Christian Darkin, christian@darkin.demon.co.uk. Footage supplied by Nick Scott at Fashion Flix 


—— 
208 | Creative Collection 2003 


FIRST STEPS 


EXPLORING 
PREMIERE PRO 


Over the next few pages, we show 
you how to use the new, enhanced, 
rebuilt, PC-only version of Premiere, 
plus Adobe’s new DVD authoring app, 
Encore DVD \ 


Welcome to 
’ Premiere'Pro = 


> Recent Projects 


prose 
77 aa 


Premiere Pro can't be started without naming or 

loading a project because of the way it handles 
your footage. Working in terms of projects means 
that everything needed for a particular piece of work 
can be easily located and transported. 


Our first job is to import the title sequence of our 
programme and drop it onto the timeline. (We 
created the title animation in AE 6- see page 204). 


{ b 2 ln 4 mh > x! an é, 
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We need to personalise the sequence to display 
various clips from this week’s programme. We 
could just drop them onto the timeline but then any 
effects or animations will need to be re-done next 
week when we change the programme's contents. 


Instead, we select New Sequence, and another 
timeline appears just as it would with a new 
composition in After Effects. Also like After Effects, 
the icon for the timeline appears in the Project 
window. We drop the clip onto this new timeline. 
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Returning to the first sequence by just clicking 
the tab at the top-left of the timeline window, we 

select the second sequence from the project window 

and drag it onto the timeline of the first. The new 

sequence we created now works like any other 

piece of media. 


Now we start to apply effects - first a pink tint 
to make the footage blend better with the title 
sequence that will be its backdrop. Effects are now 


just another tab in the Project window. 


Next, the Texturizer —a new filter imported from 

AE. This lets us use a new video layer — in this 
case a still image of some woven cloth—as a bump 
texture for our video clip. The effect gives it a cloth- 
like feel, which is in keeping with the fashion 
programme we're editing. 


We want to bring the clip in as a picture-in-picture 

shot, float it across the screen and expand it on 
the right-hand side. Animation in Premiere used to be 
a bit of a palaver; in Premiere Pro, it's much easier. 
Just select the clip and click the Motion button at the 
top of the Effect Controls window, and you can drag 
the clip around and resize it, just as though you're 
working in AE or Photoshop. 
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By turning on the animation icons for scale and 

position, we can keyframe the animation over the 
course of the clip. Keyframes now appear ona 
timeline in the Effect Controls window and, by right- 
clicking, we can alter their interpolation, making the 
changes between keyframes smooth or abrupt. 


s+ ree ~ 2a 8, 
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We can also animate the opacity so that the clip 
10 fades into view as it moves over the screen. 
The keyframes for all effects appear underneath each 
other, so it’s easy to synchronise events. 


1 With the first clip in place, we can simply set up 
other sequences for our two other clips, then 
drop these onto the timeline, too. We can also copy 
the effects attributes from our first clip to the other 
two, and the motion and keyframes go with them. 


1 All that remains is to shuffle the keyframes 

along by a couple of seconds, and alter the end 
position for our two new clips. The title sequence is 
then complete. For next week's programme, all we'll 
need to do is drag and drop new clips into the 
sequences and hit Render - they'll automatically be 
trimmed to size, positioned over our title sequence. 
All the effects will be applied as before. 


One of the inserts into our programme is a 
1 one-minute long montage set to music. This 
package will include a voice-over, and needs to be 
timed to the beats in the music. The problem is, 
nobody's planned the sequence, and nobody's 
allocated time for its editing. This is a rush job. 
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14 Importing the music and laying it onto the 
timeline is easy enough. This is going to be 
the basis for our edit, so it’s a good place to start. 


1 Next, we play through the audio, and place 
markers (these aren’t numbered) at the beats 
on which we want cuts. It’s best to do this on the fly, 
just playing through the clip and hitting the * key 
every time we want a cut. If we don’t like any of the 
markers, we can always drag them around later. 


tee ary 

1 The markers give us reference points for the 
montage — now we need some video. We 

import a range of short clips into Premiere’s Project 

window, and switch the window to Icon mode. 


1 roughly arrange the clips we want by simply 
dragging them into order. We don’t need to worry too 
much about the length of each clip, just the order in 
which we want them to appear in the montage. 


> INSIGHT 
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2 When we click OK our sequence is created. 
Playing through, we can alter any cuts we 
don't like, and generally tidy up the montage. 


2 Finally, if we want a few of our edits to be 

i mixes or wipes instead of straight cuts, or have 
effects applied, we can select all the clips we want and 
add the effect to everything ata single stroke. 


{rye arees Cos 
fo <b ob ee ls oh 
1 Next we select each clip in turn and double- 
click on it. This displays the contents in the 
monitor, where we can set an In Point for every shot. ty 
We don’t need to worry about Out Points because our 
markers will determine where the cuts occur. 
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e to Sequence 


From Copy of programme .prproj 


Greeting: [Sort Order 
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| To Sequence 01 
Placement: [at Unrunbered Markers [w] 


Method: |Inerteat [| 
Clip Overlap: 
Transitions 
| | ys Next, we need to make our programme into 
Ignore Options { a DVD production. Premiere Pro enables you 


to export all the sections of a programme to DVD. It 

: will even retain the timeline markers as chapter 

i points, so you can jump to a particular scene in your 
production on the DVD. In this case, we won't be 
using chapter points, so we just export the video. 


Mtonore Audo ! 


With all the clips trimmed, we simply select 
1 them and click the Automate To Timeline 
button at the bottom of the Project window. This 
brings up a dialog, enabling us to choose to place 
only the video of our shots on the timeline, and to 
start each clip at one of the markers we placed earlier. 
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2 We also save out a number of stills from 
our production, which we then import into 
Photoshop and convert into nice-looking buttons. 
All we've done here is used a Bevel layer style, and 
added a texture to the image to create our buttons. 
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2 Now we load up Encore, Adobe's new DVD 

authoring package, and begin a new project. 
All we have to decide initially is whether it’s going to 
be Pal or NTSC. We can then load in our raw footage, 
and the buttons we've created in Photoshop. The 
Project window in Encore is equivalent to that of 
Premiere or After Effects. 


2 Right-clicking on the Project window, we 

create a new menu, and onto this we drag the 
background image. Next, we position the three menu 
items on the backdrop, arranging them as we want 
them. Controls here are exactly the same as in 
Photoshop, Premiere or After Effects. 


2 The menu looks pretty good, but it doesn’t 
actually do anything. To make it active, we 
simply right-click each image in turn, changing them 
into buttons. We can then drag and drop items from 
the Project window over the buttons. This links those 

video clips to the button. 


2 Hitting Preview will show you exactly how the 

production you've created will play from disc. 
Controls just like those on your DVD remote help you 
work out what improvements you can make. 
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28 We decide to create a simple info screen 
describing the show. All we do is create 
another button. We could go back to Photoshop 

and design one, but it's simpler to just drag a preset 
button from the Library palette and drop it into place. 


j 

i ; 
This week's programme: comes ays ie 
from Paris. i 
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2 We then create another menu and add our 

info text. Just like in After Effects and 
Photoshop, the Text tool can be used straight onto the 
backdrop. We include another button to link us back 
to the first menu — otherwise our viewers would be 
stuck on the info screen forever. 


FINAL STEP 


inally, we can write our DVD. We can write directly 

to a CD or DVD-writer, or to a folder for copying 
later. You can’t, of course, make a DVD using a 
CD-writer but Premiere also supports CD-friendly 
formats such as VCD and SVCD. Most modern DVD 
players can play back VCDs. 


t DecName: Untitled! 

Data Format: OVD Vokume 
t Meda and size: Hard disk, 1.15 GB (1,230,831,616 bytes) 
t Compattinity: PC-based software DYD players 


Data Written: 0.00 KB of 198.2768 i 
Time Reming: Osec i 
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222. 1KBITSISEC j combustion 2.1) ae 


MOTION GRAPHICS 


SPONTANEOUS 
COMBUSTION 


It's enough to make your head 
explode — a tutorial that shows 
you how to use Discreet’s 
fantastic special effects package, 
combustion 2.1 from the Discreet 
experts themselves. Your video 
footage will never be the same... 
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If you're in the creative industry, chances are you'll have 
heard of—and possibly even drooled over — Discreet’s 
Academy Award-winning visual effects solutions: the 
power behind the visual effects in blockbuster films such 
as Gladiator, Titanic, The Matrix films, The Lord of the 
Ringstrilogy, and more. The good news is that this same 
core technology is now available in a desktop version at a 
fraction of the cost in the guise of combustion, Discreet's 
unified paint, effects and compositing software for the 
Mac and PC platforms. combustion is already acquiring 
an impressive array of film credits all its own, from the 
Harry Potter films to the title sequence for Catch Me If 
You Can. In this tutorial, we take you through the 
software's core functions, demonstrating how easy it 

is to combine video footage with animated layers and 
graphics to stunning effect. 

But we won't stop there. Once you've created your 
multi-layer animation, we'll also show you how to master 
it for a wide variety of formats -CD, DVD, PDA, and so on 
—with Discreet’s industry-standard encoding software, 
cleaner. For the purpose of this tutorial, we'll be using 
cleaner XL (for Windows), largely because it’s brand new 
and it has some major feature additions that are pretty 
Soe. yeerramen cool. However, you could achieve equally good results 

with cleaner 6 for Mac. 


462. 1KBITS/SEC a 
om 


602. 1KEITS/SEC INFO This tutorial has been co-written by Grant Kay, Discreet’s resident 
combustion guru, and fellow cleaner expert, Daniel Loshak. Further info on all 
things Discreet can be found at www.discreet.com or by phoning 020 7851 8000. 
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ON THE DVD 
Look on your 
© coverdisc for 
trial versions of 
“combustion 2.1 
(Mac + PC) and cleaner XL 
(PC - you'll need Win 2000/XP 
and RealPlayer). In the folder 
COR AMENTE/OEC 5_combust_p212, you'll also 
find the final workspace file, 
CA_final.cws, plus four source 
files: bottom.mov, top.mov, 
earth.mov and weather.ai. 
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BACKGROUND 


Start by creating the background 
using movies and an //lustratorfile 1 


Col 


Digital video 


Launch combustion and select File>Preferences. 
Under the General option, make sure ‘Display 
time as’ is set to Frames (from 1). This ensures that 
your timing matches the rest of the tutorial. 


Next, select File>New to create a workspace and 
a composition within the workspace project. In 
the pop-up window, select ‘Composite’ for Type, 
enter ‘Weather Opening’ for the Name, and set the 
Format to PAL D1and Duration to 75 frames. Finally, 
don't forget to set the Mode to 3D. 


Now bring the footage into the composite. 
Simply select File>Import Footage, then in the 
browser navigate to the ‘footage’ directory. Using 
the Ctrl key, multi-select Bottom.mov, Weather.ai 
and Top.mov and click OK. You can display this as 
thumbnails or a list. 


lection 
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THE 


ANIMATION 


You can animate almost every value in 
combustion. Animation can be achieved 

using the sliders, a text entry, the calculator 

or directly in the timeline. Inside the timeline, 
you can view the animation in two ways: via 
keyframes over time or keyframes on a graph. 
Because layers are animated, you can see the 
animation path in the viewports and fine-tune 
them using the different entry methods above. 


In the workspace layer panel, rearrange the 

layers so that the Weather layer sits above the 
Top layer. When working in layer-based applications 
such as combustion, prioritising layers helps 
determine how your visualisation will appear within 
the screen’s 2D environment. You determine which 
layers will be in front and which will be in the 
background. 


At this point, the layers may appear disjointed, 

rather than as a single image. Worry not— you 
can solve this by using transitions to subtly blend 
the layers together. Select the Top layer, and on the 
menubar go to Operators>Transitions>Linear Wipe. 
In the Transition menu, set Amount to 50 per cent 
and Feather Amount to 40. 


Next, we're going to re-position the Weather 

layer in relation to the other layers. Do this by 
selecting the Weather layer, then, in the Transform 
menu of the composite controls, change the X 
Position to -260 and the Y Position to 235. With the 
Weather layer still selected, now go to 
Operators>Distort>Resize on the windows menu, 
set the Method to Tile and adjust Corner 2’s X value 
to 1000. 


Next, adjust the way the Weather layer interacts 

with the surrounding layers. Again, click on the 
Weather layer in the workspace panel to bring up the 
composite controls. Select the Surface sub-menu, 
change the Transfer Mode to Overlay and set the 
Opacity to 25 per cent. 


Now create a duplicate of the Weather layer by 

right-clicking on that layer in the workspace panel 
and selecting Duplicate. Select the Weather layer 
again and click on the Transform sub-menu in the 
composite controls, changing the Y Position to -235. 


And now for the fun part! Turn the Animate 

button On (Red). Change the X Position of 
Weather layer to -490. Go to frame 70 and change 
the X Position to -260. Select the Weather (1) layer 
and set the X Position to -490. A motion path is now 
created for each layer, after which you should turn 
Animate Off. Hit Play to see the results of your 
handiwork, but always remember to return to 
frame 1 once you've stopped playback. 


PART 2 THE 
FOREGROUND 
The foreground element for this 


project is a QuickTime movie with 
an alpha channel embedded 1 


1 Now to import the movie. Select File>Import 
Footage, then in the browser navigate to 
the Footage directory, select earth.mov (on your 


DVD) and click OK. The file should now be imported. 


1 The image of the Earth is quite large and 


needs to be reduced in size for the animation. 


So select the Earth layer and in the Transform 
controls menu, scale the Earth layer to 55 per cent 
with the Proportion button enabled. 


FLEXIBILITY 

In combustion, you work within a single 
workspace or project, but you can have 
multiple compositions inside the project. This 
gives you enormous flexibility in the way you 
work, all in a single workspace. It also means 


layer in and out of context of the composition. 


To add the text element into the scene, you 
1 need to create a new layer. First, return 
to frame 1, right-click on the composite in the 
workspace and select New Layer. Change the 
Type to ‘Text’ with a Duration of 75 frames with 
Transparent enabled, and call the layer ‘Title’. 


Now, in the Basics menu of the text controls 
1 tab, click in the Text Editor and type ‘Earth 
Wind Fire Water Earth Wind Fire Water’. Change the 
Font to Arial, set the Style to Bold and set Font Size 
to 62. 


Click the Advanced button and change the 
1 4 Path Options Type to Loop. Turn Animate On 
and go to frame 70. Adjust the Path Offset to 100 per 
cent, turn Animate Off and press Play. Once you're 
done, press Stop and return to frame 70. 
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1 Finally, double-click on Composite in the 

workspace panel to see all the layers together. 
Holding the Ctrl key, select ‘Weather’, ‘Weather (1)’, 
‘Top’ and ‘Bottom’ layers. In the composite controls, 
select the Layer sub-menu and change Depth Order 
to Background for the selected layers. 


ANIMATION 


Time to add layer animation and 
parenting — and bring things to life 1 


1 6 Next, we show you how to add animation 

to the Text layer in the composite. Click the 
Timeline tab and select Graph mode and turn 
Animate On. At frame 70, select the Text layer 
and double-click on Y Rotation and type 360. 


7 Double-click on X Rotation and type 0. Go to 
1 frame 1 and change the X Rotation value to 
75. In the graph timeline, combustion has calculated 
the animation between 1 and 75 frames. Now turn 
Animate Off and, if you feel it needs finessing, adjust 
the Bézier handles to smooth out the motion. 


To make sure the text follows the Earth, 
1 combustion is able to lock layers to one 
another. Click the Composite controls tab and click 
the Transform sub-menu. Select the Text layer and 
change the Parent from (none) to the Earth layer. 


COMBUSTION 
+ PHOTOSHOP? 
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PART 4 
FINAL TOUCHES 


Enhancing compositing using 3D J 


At frame 1, turn Animate On. Click on the 
1 Workspace tab, select the Earth layer and 
change the Z position to -700. Go to Frame 70 and 
change the Z position value to 0. Turn Animate off. 
Believe it or not, you've just animated a layer in 3D 
space (and you thought it would be difficult!). 


2 Now select the Light object in the workspace 
panel (you may need to scroll the box down). 
Select the Settings sub-menu in the composite 
controls. Under Render Effects, turn on Shading. 
The illumination of the composite now changes. 


2 Repositioning the light enables you to 

re-light your composite completely. Select 
the Transform sub-menu and change the position of 
the light. Set the X Position and Y Position to 0, but 
the Z Position must be -710. At this point, you could 
add multiple lights to your scene if you like. 


2 To access the light settings, select the Light 

sub-menu. Change the Light Type to Spot. 
Now change its Intensity to 80 per cent, the Cone 
Angle to 75 and set the Soft Edge to 300. 
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2 Select the Text layer in the workspace panel 
and select the Surface sub-menu. Change the 
transfer mode from Normal to Difference. Now just 
press Play to see the final result. You can now render 
this composite out as an uncompressed source and 
import it into cleaner XL for output in other formats. 


PART 5 CLEANER XL 


Next, we're going to take the 
full-res animation (weather.mov) 
and master it to a variety of formats J 


2 This combustion clip is a breeze for cleaner XL 
to encode. Fire up your demo (or cleaner 6 if 
you're on a Mac) and you’re presented with a default 
‘NTSC to Windows Media 9’ job window. From the 
File menu, choose ‘New Job From Template’, 
navigate to the Expert folder and choose Blank. 


erp ra pmeneg— 
TD WHS NTSC 403 streaming 768k DSL Sapte bal Bi 
|) WMS NTSC 4x3 streaming 512k DSL Destinations 

(2) WMSNTSC 413 streaming 25505 | [TF GeaneOupt  =~=—SOS~S 
[2] WMS NTSC 4x2 streaming Bk modem | 
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2 For the Input Profile, navigate to the Expert 
5 Folder. Choose Non-Square PAL 4x3 
Progressive. (This assumes you've rendered out 
using 720x576 non-square pixel, progressive, 25fps.) 
Now add the source clip. Right-click in the source 
plane (or Ctrl+Shift+A) and navigate to the 
‘weather.mov’ clip on the DVD. 


=o 
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2 Now you need to add some Output Profiles. 

cleaner XL comes with lots of presets for all 
the popular formats that are great for video, but not 
so good for computer-generated content. What 
format you encode to will depend on where your 
clip is going to be viewed. Here, we'll add QuickTime, 
Windows Media 9 and MPEG-2. Right-click on the 
Output Profile box to add a saved profile. Navigate 
to QuickTime/PAL 4x3, and select ‘OT6 PAL 4x3 
download medium’. Next, expand the Monitor 
window, which should be nestling quietly in the 
bottom-left corner of the screen. 


27 Now to preview the video. First, expand the 
Preview window; to preview the source, use 
the controls in the Monitor window, and set In and 
Out points using the buttons (marked above). Play 
around to get familiar with the three preview options. 


Input Profile: |DV PAL 4x3 Progressive 


fF] ZF C\Documents and Settings\loshad\Desktop\ Weather. mov 


| Processing 
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2 Next, set up audio and video filtering. Click 
on the Filter Settings dropdown in the Job 
window. By default, Noise Reduce and Colour Adjust 
are switched on. This is a perfectly clean source, so 
switch this off. Finally, apply a Normalize filter to the 

audio. Under the Audio filter tab, check Normalize 
and leave it at the default 90 per cent. 


2 Preview the clip again using the controls 

mentioned in step 27. After previewing this 
clip a few times, you'll probably notice that we’re 
getting some pixellation in the background. To fix 
this, you need to go into the Encoder settings and 
adjust a few things. First off, choose Edit from the 
Encoder Setting dropdown. 


3 Adjust the settings as shown above (Audio — 

Codec Fraunhofer MP3, 44.1KHz Stereo, bit- 
rate 160). Change the Keyframe rate to 0 and data rate 
to 1000kbps). Don’t close the box. Right-click on the 
QT6 PAL output profile. Choose Duplicate. Rename 
this ‘QT6 PAL Full screen’. In the Encoder Settings, 
change Image Size to 640x480 and Data Rate to 
3000kbps. Load in a Saved Output Profile called 
‘WM9 PAL 4x3 download Full screen’, remember to 
switch off any video filtering, and enable Normalize 
audio. By default, cleaner places encoded files in your 
‘My Documents’ folder, so we'll add another for WM9 
content. With the WM9 profile selected, right-click in 
the destinations plane and choose Add New.... 
Choose Browse and create a new folder, calling it ‘XL 
WMS9 Animation Encodes’. Give the Destination a 
name and uncheck the Cleaner Output Destination. 
Lastly, add an MPEG-2 Output Profile, but close the 
preview window before doing this to keep everything 
nice and speedy. MPEG-2 ‘Elementary’ will give you 
separate audio and video files, suitable for DVD 
authoring applications, and ‘Program’ will give you a 
single file containing both audio and video. Again, 
remember to switch off the video filters, and you 
don’t need to Normalize the audio this time. Create a 
Destination for the MPEG-2 file. 
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3 Now save the job, giving it a useful name so 
that you can easily locate it. From the Job 
menu, choose ‘Encode Now...’ (or Ctrl+Shift+E). The 
encoding process now begins. At the bottom of the 

Job window, click the button to expand it and see 
what stage of the process cleaneris at. A small, 
chequered flag means that the file has finished 
encoding; double-click on it to play the encoded file. 
The encoding should be over in a couple of minutes. 
Looking at the encoded files, you'll see how we've 
taken the size down from nearly 20MB to 675k, even 
at full screen. The luxury we have here is that we can 
increase the data rate to generate even higher quality 
and still end up with a manageable file size. 


FINAL STEP 


nd here's the final result. Good, isn’t it? Before 

we go, though, here’s a quick note about 
Watchfolders... A Watchfolder job is set up ina 
similar way to a normal job: Output profiles and 
Destinations are added, but instead of adding media, 
you add or create a folder that watches and waits for 
media to be placed within it. As soon as this happens, 
cleaner XL starts encoding automatically. 
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